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业界 评论 


“O'Reilly Radr Ñ ZA O H o” 


Wired 


“O'Reilly 和 凭借 一 系列 (真希 望 当初 我 也 想到 了 ) 非凡 想法 建立 了 
数 百 万 美元 的 业务 。” 


Business 2.0 


“O'Reilly Conference 是 聚集 关键 思想 领袖 的 绝对 典范 


——CRN 


“一 本 O'Reilly 的 书 束 代 表 一 个 有 用 、 有 前 途 、 需 要 学 习 的 主题 。” 


Irish Times 


“Tim 是 位 符 立 独行 的 商人 ， 他 不 光 放 眼 于 最 长 远 、 最 广阔 的 视野 
并 且 切 实地 按照 Yogi Berra 的 建议 去 做 了 : “如 采 你 在 路 上 过 到 多 路 
口 ， 走 小 路 EE) 。’ 回 顾 过 去 Tim 似 乎 每 一 次 都 选择 了 小 上 路， 而且 
有 几 次 都 是 一 内 即 授 的 机 会 ， 尽 管 大 路 也 不 错 。” 


Linux Journal 
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程 ， 只 要 把 脚本 硬 塞 入 网 页 之 中 就 行 了 。 现 在 ，HTML 和 JavaScript 在 
实现 民 好 用 户 体 验 的 过 程 中 产生 了 重要 作用 。 通 过 阅读 本 书 ， 你 将 会 
掌握 Web 发 展 进程 中 最 前 沿 的 技术 。 


本 书 主 要 内 容 


本 书 有 覆盖 的 内 容 如 下 : 
第 1 章 Web 应 用 平台 


介绍 在 新 的 HTML 5 平台 编程 的 原因 ， 以 及 新 平台 为 JavaScript 编 
程 人 员 提 供 的 便利 。 


第 2 章 ”JavaScript 的 力量 


介绍 JavaScript 中 很 强大 但 是 你 可 能 并 不 知道 的 功能 ， 以 及 为 什么 
你 需要 使 用 这 些 功能 去 探索 本 书 涵盖 的 HTML 5 的 新 特性 以 及 相关 
库 o 


第 3 章 ”测试 JavaScript 应 用 


展示 由 JavaScript 和 浏 蜗 絮 提供 的 特定 环境 中 测试 程序 的 方法 。 
Bae ”本 地 存储 


描述 使 用 localStorage 和 sessionStorage 对 象 缓存 在 浏览 右 中 的 人 简单 
数据 。 


“35m. IndexedDB 


展示 支持 本 地 存储 的 更 强大 的 NoSQL 数 据 库 。 
第 6 章 文件 

描述 从 用 户 系统 中 读 取 和 上 传 文件 的 方法 。 
第 7 革 ”离线 处 理 


描述 让 用 户 在 设备 不 能 联网 的 情况 下 使 用 你 开发 的 应 用 程序 所 要 
做 的 操作 ° 


第 8 章 ” 把 工作 分 割 成 Web Worker 
展示 HTML 5 和 JavaScript 的 多 线程 能 


第 9 章 Web Socket 


演示 如 何 通过 使 用 Web Socket 提 高 浏览 器 端 和 服务 器 端的 数据 传 
输 效率 。 


第 10 章 ”新 标记 


总 结 HTML 5 引入 的 对 Web 开 发 人 员 最 为 有 用 的 新 标记 。 


附录 A ”需要 了 解 的 JavaScript 工 具 


描述 本 书 中 用 到 的 以 及 其 他 可 以 让 编程 更 快 更 准确 的 工具 。 


排版 约定 


PR ` 


本 书 采 用 了 以 下 排版 约定 : 

斜体 (Italic) 

表示 新 术语 、 网 址 、 电 子 邮 件 地 址 、 文 件 名 和 文件 扩展 名 。 
等 宽 字 体 (Constant width ) 


用 于 表示 代码 清单 以 及 正文 中 引用 的 代码 元 素 ， 如 变量 或 男 数 名 
声明 和 关键 词 。 


等 宽 斜 体 (Constant width italic) 


表示 需要 由 用 户 提供 值 或 由 上 下 文 决定 的 值 来 巷 换 的 文本 。 


TER: 表示 提示 、 建 议 或 者 一 般 性 注释 。 


Ba: 表示 警告 或 注意 事项 。 


代码 示例 的 使 用 


本 书 旨 在 帮助 你 完成 你 的 工作 。 一 般 来 说 ， 可 以 在 程序 和 文档 中 
使 用 本 书 的 代码 。 如 果 你 复制 了 代码 的 关键 部 分 ， 那 么 你 需要 联系 我 
们 获得 许可 。 例 如 ， 利 用 本 书 的 几 段 代码 编写 程序 是 不 需要 许可 的 。 
售卖 或 出 版 O'Reilly 书 中 示例 的 CD-ROM 需 要 我 们 的 许可 。 引 用 本 书 回 
答 问 题 以 及 引用 示例 代码 不 需要 我 们 的 许可 。 将 本 书 的 大 量 示例 代码 
用 于 你 的 产品 文档 中 需要 许可 。 


如 有 果 你 在 参考 文献 中 提 到 我 们 ， 我 们 会 非 党 感激， 但 并 不 强求 。 
参考 文献 通常 包括 标题 、 作 者 、 出 版 社 和 ISBN。 例 如 : "Programming 
HTML 5 Applications by Zachary Kessin (O'Reilly) .Copyright 2012 
Zachary Kessin, 978-1-4493-39908-5" ° 


如 果 你 认为 对 代码 示例 的 使 用 已 经 超出 以 上 的 许可 范围 ， 我 们 很 
欢迎 你 通过 permissions@oreilly.com 联 系 我 们 。 


联系 我 们 


有 天 本 书 的 任何 建议 和 疑问 ， 可 以 通过 下 列 方式 与 我 们 取得 联 
系 : 


RH: 


O'Reilly Media,Inc. 


1005 Gravenstein Highway North 


Sebastopol,CA 95472 


中 国 : 


北京 市 西城 区 西直门 南大 街 2 号 成 馈 大 厦 C 座 807 室 (100035) 
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我 们 会 在 本 书 的 网 页 中 列 出 勘误 表 、 示 例 和 其 他 信息 。 可 以 访 
问 


http://shop.oreilly.com/product/0636920015116.do 


技术 问题 或 评论 本 书 ， 请 发 送 邮 件 至 : 


bookquestions@oreilly.com 


获取 有 关 本 书 的 更 多 信息 、 会 议 、 资 源 中 心 和 O'Reilly 网 站 的 相关 
言 轧 ， 请 查看 我 们 的 网 站 : 


http://www.oreilly.com 

http://www.oreilly.com.cn 

在 Facebook 上 联系 我 们 : http://facebook.com/oreilly 
在 Twitter 上 联系 我 们 : http://twitter.com/oreillymedia 


在 Youtube 上 联系 我 们 : http://youtube.com/oreillymedia 
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第 1 章 Web 应 用 平台 


HTML 5 可 以 将 Web 打 造成 创建 真正 应 用 程序 的 一 流 环境 。HTML 
5 提供 了 对 浏览 器 API 的 一 系列 关键 扩展 ， 以 此 加 强 了 JavaScript 现 有 的 
工具 集 ， 这 些 扩 展 使 开发 人 员 更 简便 地 创建 自我 完善 的 应 用 ， 而 非 现 
在 的 这 种 仅仅 显示 远程 服务 器 进程 的 界面 。 


Web 最 初 是 一 种 分 享 存 储 在 web 服务 器 上 文件 的 方法 ， 这 些 文件 
只 是 偶尔 变化 。 开 发 人 员 很 快 想 出 了 如 何 实时 生成 那些 文件 ， 从 而 向 
构建 应 用 程序 迈 出 了 第 一 大 步 。 下 一 大 步 是 向 浏览 器 客户 端 中 添加 交 
互 性 。 随 着 “浏览 器 大 战 ? 的 肆虐 和 之 后 突然 停止 ，JavaScript 和 文档 对 
象 模型 (DOM) 开始 让 开发 人 员 能 够 创建 动态 HTML。 几 年 后 ，Ajax 
将 这 些 技术 用 于 样式 中 。Ajax 增 加 了 一 些 工 具 ， 使 页 面 与 服务 器 以 更 
小 的 单元 进行 通信 。 


HTML 5 建立 在 这 20 年 的 发 展 之 上 ， 填 补 了 一 些 重要 的 空 日 。 从 
表面 上 看 ， 许 多 HTML 5 的 变化 是 增加 了 对 以 前 需要 用 插件 实现 的 功 
能 (尤其 是 多 媒体 和 图 像 ， 的 支持 ， 实 际 上 ， 它 为 JavaScript 程 序 员 提 
供 了 一 些 独立 (或 者 至 少 更 松散 合作 ) 创建 应 用 程序 的 工具 ， 有 了 这 
些 工 具 他 们 可 以 用 HTML 搭 建 架 构 、 用 CSS 制 作 界 面 、 用 JavaScript 表 
达 逻 辑 和 行为 。 


为 Web 应 用 增加 力量 


HTML 5 提高 了 Web 应 用 的 标准 。 尽 管 它 仍然 需要 工作 在 安全 约束 
条 件 下 ， 但 最 终 会 提供 桌面 开发 人 员 已 经 期 办 多 年 的 工具 : 


本 地 存储 
引用 键 - 值 系统 多 达 5MB 的 数据 。 
数据 库 


起 初 是 一 个 基于 SQLite 的 API， 形 势 似乎 已 经 转向 
IndexedDB,IndexedDB 是 一 种 JavaScript 原 生 的 NoSQL 系 统 。 


a 


尽管 出 于 安全 的 原因 Web 应 用 依旧 不 能 自由 地 访问 文件 系统 ， 但 
是 已 经 能 够 使 用 用 户 指 定 的 文件 ， 并 开始 创建 文件 了 。 


离线 操作 


当 笔记 本 电脑 或 手机 在 “飞行 模式 "时 ，Web 应 用 无 法 与 服务 器 通 
信 。 清 单 (Manifest) 文件 通过 缓存 文件 到 本 地 帮助 开发 人 员 实 现 离 
线 应 用 。 


Web Worker 


线程 和 子 进程 一 直 是 个 问题 ， 但 是 JavaScript 根 本 不 提供 这 些 。 
Web Worker 提 供 了 一 种 方法 ， 将 应 用 进程 放 到 独立 空间 中 ， 在 那里 它 
们 可 以 互 不 干扰 地 工作 。 


Web Socket 


尽管 超 文 本 传输 协议 (HTTP) 随 着 时 间 的 推移 有 一 些 更 新 ， 但 它 
一 直 是 Web 的 基础 。Web Socket 将 “请 求 / 啊 应 ”的 通信 方式 转化 成 创建 
更 灵活 的 通信 系统 。 


当然 ， 还 有 更 多 工具 ， 从 地 理 信息 、 首 频 和 视频 、 画 布 图 形 到 各 
种 小 的 新 标记 ， 这 些 工 具 为 在 HIML 5 上 构建 工业 级 的 应 用 提供 了 基 
础 。 


开发 网 络 应 用 程序 


E, 复杂 的 Web 应 用 程序 只 不 过 是 一 个 目录 、 一 个 从 数据 库 派 
生 的 静态 页 面 或 者 一 个 JavaScript 生 成 的 计算 器 ， 没 有 人 梦想 用 
JavaScript 做 复杂 的 应 用 程序 。 复 杂 的 应 用 程序 需要 用 Java、C 或 C++ 写 
的 专门 的 客户 端 /服务 右 应 用 程序 。 事 实 上， 在 DOM 和 Ajax 出 现 前 想 
要 用 JavaScript 这 样 做 几乎 是 不 可 能 的 。 然 而 ，Ajax 引 入 了 不 需要 重新 
加 载 页 面 即 可 与 服务 器 通信 的 功能 ， 而 且 DOM 人 允许 程序 员 即 时 改变 
HTML 。 


ee 
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员 前 所 未 有 的 力量 。Gears 人 允许 浏 览 磺 离线 工作 ， 可 以 让 用 户 在 浏览 器 
中 存储 更 多 数据 ， 并 设计 了 一 个 工作 池 (Worker pool) 用 于 处 理 长 时 
间 运 行 的 任务 。Gears 已 经 停 用 ， 但 是 它 的 大 多 数 功能 经 过 修改 后 已 移 
植 到 HTML 5 中 。 


现代 Web 看 起 来 像 一 个 全 方位 的 网 站 ， 包 含 各 种 内 容 ， 从 维基 百 
科 那 样 依 旧 有 效 的 旧式 文档 集合 ， 到 Facebook、YouTube 和 eBay 这 种 
提供 与 他 人 交互 的 网 站 ， 再 到 可 以 称 为 奉 代 提 面 应 用 程序 的 东西 ( 例 
如 Gmail 和 Google Docs) 。 许 多 以 前 独立 的 应 用 程序 ， 例 如 邮件 客户 
端 ， 已 经 变 成 了 Web 体 验 中 不 可 分 割 的 一 部 分 。 在 现代 Web 中 ， 应 用 
程序 和 页 面 间 的 界线 已 经 非常 模糊 ， 只 在 网 站 的 用 途 上 有 所 区 别 。 


在 浏览 郁 中 运行 应 用 程序 对 于 用 户 和 开发 人 员 都 有 很 大 的 优势 。 
对 用 户 来 说 ， 使 用 Web 应 用 没有 负担 : 用 户 可 以 试用 应 用 程序 ， 如 果 
不 喜欢 束 换 个 页 面 而 不 会 在 硬盘 上 留 下 任何 东西 。 壬 试 新 的 应 用 也 相 
当 安 全 ， 因 为 它们 运行 在 一 个 沙 箱 环境 中 。 当 开发 人 员 更 新 代码 时 ， 
新 版 本 的 应 用 程序 会 目 动 下 载 到 浏览 右 。Web 应 用 程序 很 少 有 版 本 
号 ， 至 少 已 公开 的 应 用 程序 是 这 样 的 。 


对 开发 人 员 来 说 ， 在 浏览 山中 运行 应 用 程序 优势 更 大 。 前 先 ， 对 
用 户 来 说 的 优势 对 开发 人 员 也 是 优势 。 其 次 ， 开 发 人 员 不 需要 写 安 装 
程序 ， 而 且 新 版 本 可 以 目 动 发 送 给 用 户 ， 使 得 小 量 的 更 新 切 实 可 行 。 
男 外 ， 还 有 其 他 好 处 。 


Web 是 跨 平 台 的 ， 开 发 人 员 都 希望 开发 的 应 用 能 运行 在 多 个 系统 
上 ， 例 如 Windows XP、Windows Vista、Windows 7、Mac OSX、 
Linux、iPhone/iPad 和 Android， 这 个 愿景 如 果 用 传统 的 开发 工具 来 实 
现 将 是 一 项 非常 艰巨 的 任务 ， 但 是 用 Web 和 一 些 具有 前 上 脆性 的 技术 来 
实现 ， 就 会 变 得 十 分 简单 。 一 个 用 标准 类 库 (例如 jQuery) 建立 的 网 
络 应 用 能 运行 在 上 述 所 有 这 些 和 其 他 几 个 平台 的 多 数 浏 览 絮 上 。Sun 
公司 一 度 希 望 Java applets 将 Web 定 义 为 一 个 平台 ， 现 在 JavaScript 已 成 
为 默认 的 Web 平 台 。 


你 甚至 可 以 在 移动 设备 上 运行 Web 应 用 ， 至 少 现在 可 以 在 智能 手 
机 上 运行 。 你 可 以 用 一 个 包装 (例如 PhoneGap) 来 创建 一 个 HTML 5 


应 用 ， 并 把 它 打 包 ， 在 App Store ` Android Market 和 其 他 网 站 上 出 
售 。 你 可 以 创建 一 个 与 Web 服 务 絮 大 量 交 互 或 者 完全 独立 的 应 用 ， 两 
AA e 


HTML 5 之 前 的 Web 真 正 的 不 足 之 处 在 于 ， 一 个 运行 在 计算 机 上 的 
Web 应 用 要 占用 上 千 兆 字 下 内 存 和 伍 盘 空间 ， 运 行 起 来 像 在 老式 vt320 
终端 上 一 样 慢 。 所 有 数据 存储 必须 在 服务 右上 完成 ， 所 有 文件 必须 从 
服务 右 加 载 ， 每 一 个 交互 必须 完成 一 次 与 服务 器 间 的 往返 。 这 会 使 用 
性 感觉 较 慢 ， 特 别 古 当 用 户 距 离 服务 右 很 远 时 。 如 有 果 用 户 查 看 页 面 每 
次 要 耐心 等 每 至 少 400ms， 用 户 丈 会 感觉 应 用 程序 运行 很 慢 。 从 我 在 
特拉维夫 的 办 公 室 到 加 利 福 尼 亚 的 一 个 服务 器 ，ICMP ping 的 一 次 往返 
时 间 约 为 250ms。 到 服务 器 上 的 任何 操作 都 将 耗费 额外 的 时 间 ， 使 应 
用 运行 慢 下 来 。 当 然 ， 移 动 设备 通信 更 慢 。 


JavaScript 的 胜利 


尽管 JavaScript 自 1995 年 出 现 以 来 已 经 成 为 Web 开 发 的 天 键 组 成 部 

， 但 是 这 十 几 年 来 它 一 直 背 负 痢 坏 名 声 : 语法 古怪 、 性 能 低下 、 产 
生 奇 怪 的 错误 ， 以 及 对 DOM (Document Object Model， 文 档 对 象 模 
型 ) 的 依赖 。 尽 管 浏览 器 已 经 将 其 封 财 在 * 沙 箱 " 中 ， 简 化 了 用 户 的 安 
全 问题 ， 但 是 要 为 JavaScript 开 发 人 员 提 供 一 些 在 传统 桌面 应 用 开发 中 
显得 微不足道 的 功能 却 很 难 。 


脚本 文化 造 束 了 它 目 喘 的 问题 。 提 供 非常 低 的 进入 门槛 是 件 好 
事 ， 但 是 需要 付出 代价 。 代 价 之 一 惑 是 ， 这 样 一 种 语言 往往 允许 没有 
经 验 的 程序 员 做 一 些 非常 不 明帝 的 事情 。 起 初 ， 程 序 员 可 以 很 容易 地 
从 Web 上 找到 JavaScript 例 子 ， 藤 切 、 烙 贴 或 做 一 些 修 改 ， 区 ® 能 得 到 大 
多 数 可 用 的 东西 。 遗 憾 的 是 ， 随 着 时 间 的 推移 对 这 些 代 码 的 维护 变 得 
越 来 越 困难 。 


随 着 Ajax 的 流行 ， 开 发 人 员 对 JavaScriptf 有 了 新 的 看 法 。 一 些 开 发 
者 致力 于 对 解释 和 运行 JavaScript 代 码 的 引 警 进行 改进 ， 致 使 运行 速度 
大 幅度 提升 。 还 有 一 些 开发 者 则 致力 于 语言 本 身 ， 他 们 意识 到 
JavaScript 有 一 些 很 不 错 的 功能 ， 能 够 开发 最 好 的 应 用 ， 正 如 Douglas 
Crockford 的 《JavaScript 语 言 精 粹 》 (JavaScript: The Good 
Parts,O'Reilly 2008 出 版 ) 中 所 讲述 的 一 样 。 


除了 核心 语言 之 外 ， 开 发 人 员 还 创建 了 一 些 工 具 使 JavaScript 更 易 
于 调试 。 尽 管 Venkman (一 款 早期 的 调试 器 ) 在 1998 年 就 出 现 了 ， 但 
是 2006 年 发 布 的 Firebug 成 了 JavaScript 调 试 器 的 黄金 标准 。 它 允许 开发 
人 员 对 Ajax 调用 进行 跟踪 ， 查 看 DOM 和 CSS 的 状态 ， 并 单 步 执行 代码 
等 。 基 于 WebKit 的 浏览 器 提供 了 类 似 的 内 置 功 能 ， 尤 其 是 苹果 公司 的 
Safari 和 GoogleChrome,Opera Dragonfly 则 对 Opera 提 供 支持 。 甚 至 ， 在 
移动 设备 封闭 空间 中 工作 的 开发 人 员 现 在 也 能 用 Weinre (Web 
Inspector Remote: 远程 Web 调 试 器) 像 Firebug 一 样 进行 调试 。 


类 库 是 JavaScript 最 近 大 规模 投入 的 最 终 关 键 组 成 部 分 。 开 发 人 员 
可 能 依旧 不 能 理解 他 们 使 用 的 全 部 代码 ， 但 是 能 够 将 代码 组 织 得 更 易 
于 升级 ， 有 时 长 至 可 以 用 可 互 换 的 类 库 简 化 代码 管理 。 


jQuery 


如 果 有 一 个 类 库 可 以 称 为 JavaScript 类 库 的 “黄金 标准 ”的 话 ， 那 一 

xe John Resig 的 jQuery 类 库 。jQuery 围 绕 DOM 和 其 他 JavaScript 对 和 象 

(如 XMLHttpRequest 对 象 ) 形成 了 一 个 包装 器 ， 使 得 用 JavaScript 实 现 
各 种 功能 更 轻松 、 更 有 趣 。 从 许多 方面 讲 ，jQuery 都 是 每 个 JavaScript 
程序 员 应 该 熟知 、 必 不 可 少 的 类 库 。 学 习 jQuery 请 访问 网 站 
http://jquery.org， 或 者 阅读 由 O'Reilly 出 版 的 大 量 优秀 图 书 ， 例 如 《 深 
入 浅 出 jQuery》 (Head First jQuery) 或 者 《jQuery 锦 圳 妙计 》 

(jQuery Cookbook) 。 本 书 中 的 许多 示例 都 是 用 jQuery 编写 的 。 


ExtJS 


鉴于 jQuery 形成 了 一 个 DOM 包 装 器 ExtJS， 因 此 人 们 从 Sencha 

(http://sencha.com) 开始 设法 尽 可 能 地 把 它 从 中 剥离 。ExtJS 以 丰富 的 
widget 控件 集 为 特点 ， 可 以 在 任意 web 页 面 上 执行 ， 并 提供 了 许多 桌面 
开发 人 员 所 熟悉 的 widget 控件 ， 如 树 、 网 格 、 标 单 、 按 钮 等 。 整 个 系 
统 经 过 深思 熟 虚 并 良好 地 组 织 在 一 起 ， 使 许多 应 用 的 开发 成 为 一 种 享 
受 。 昌 然 ExtJS 的 库 往 往 都 很 大 ， 但 是 它 非 常 适合 一 些 应 用 开发 。 
ExtJS 有 一 个 不 错 的 功能 ， 即 它 的 许多 对 象 都 知道 如 何 保存 自 喘 的 状 
态 。 因 此 ， 如 果 用 户 有 一 个 表格 ， 并 当 再 次 浏览 该 表格 时 对 它 的 列 进 
行 了 重新 整理 ， 那 么 可 以 设置 它 来 保存 这 个 状态 。 第 4 章 中 的 “在 ExtJS 
中 使 用 localStorage” 讲 述 了 如 何 利用 本 地 存储 加 强 这 一 功能 


Google Web 套 件 及 其 他 


一 些 工 具 如 GWTI 人 允许 程序 员 编 写 Java 代 码 ， 然 后 编译 成 
JavaScript， 这 样 束 可 以 在 浏览 絮 中 运行 了 。 


第 2 草 JavaScript 的 力量 


JavaScript 语 言 编程 并 不 难 ， 但 是 要 达到 真正 的 JavaScript 专 家 级 水 
平 非 常 有 挑战 性 。 成 为 熟练 的 JavaScript 程 序 员 有 几 个 关键 因素 。 本 章 
中 的 技术 将 反复 出 现在 本 书 剩 余部 分 所 介绍 的 类 库 和 编程 实践 中 ， 
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附录 中 列 出 了 一 些 优秀 的 JavaScript 编 程 工具 。 这 些 工具 可 以 提供 
大 量 的 帮助 。 例 如 ，JSLint ( 见 附录 : JSLint) 能 捕获 一 些 程序 员 可 能 
会 漏 掉 的 错误 。 一 些 网 站 是 这 类 编程 工具 的 很 好 来 源 ， 如 
StackOverflow 和 O'Reilly Answers。 


本 章 并 非 要 完整 地 介绍 JavaScript 的 力量 。 有 关内 容 可 参阅 下 列 
JavaScript 书 籍 : 


《JavaScript 语 言 精粹 》 (JavaScript,The Good Parts) , Douglas 


Crockford 


《JavaScript 权 威 指南 》 (JavaScript: The Definitive Guide) ， 


David Flanagan 


《高 性 能 JavaScript 编 程 》 (High Performance JavaScript) ， 


Nicholas C.Zakas 


.《JavaScript 模 式 》 (JavaScript Patterns) , Stoyan Stefanov 


非 阻塞 IO 和 回调 


撤 开 语言 本 身 不 谈 ， 学 习 JavaScript 的 首要 关键 是 理解 事件 驱动 编 
程 。JavaScript 运 行 环境 中 的 操作 往往 是 异步 操作 ， 这 就 是 说 先 在 某 个 
地 方 创建 操作 ， 当 一 些 外 部 事件 发 生 后 再 执行 。 


这 样 可 以 说 明 传 统 语言 中 WO 方面 发 生 的 主要 变化 。 例 2-1 是 一 个 
典型 的 传统 语言 O 示 例 ， 本 例 使 用 PHP 语 言 。$db- > getAll 
($query) ; 这 一 行 要 求 数据 库 访 问 硬盘 ， 因 此 它 花 费 的 运行 时 间 将 
比 函 数 中 的 其 他 部 分 多 很 多 。 当 程序 等 待 服务 器 执行 时 ， 查 询 语句 被 
阻塞 ， 程 序 什么 都 不 做 。 通 常 ， 这 在 服务 器 端 语言 中 (如 PHP) 不 成 
问题 ， 因 为 可 以 有 很 多 并 行 执行 的 线程 或 进程 。 


例 2-1: PHP 中 的 阻塞 IO 


function getFromDatabase( ) 


{ 

$db=getDatabase(); 

$query="SELECT name FROM countries"; 
$result=$db- >getAll($query); 
return$result; 


} 


然而 ，JavaScript 中 仅 有 一 个 执行 线程 ， 因 此 ， 如 果 函 数 被 阻塞 丈 
什么 都 不 做 了 ， 那 么 用 户 界 面 也 会 冻结 。 因 此 ，JavaScript 必 须 找 到 一 


个 不 同 的 方式 来 处 理 MO (包括 所 有 的 网 络 操 作 ) 。JavaScript 所 做 的 就 
古 立 即 从 一 个 可 能 感觉 缓慢 的 方法 中 返回 ， 留 下 一 个 函数 ， 当 操作 
(例如 ， 从 Web 服 务 器 下 载 新 的 数据 ) 完成 时 进行 调用 。 该 函数 称 为 
回调 。 当 Ajax 调 用 服务 器 时 ，JavaScript 发 出 该 请 求 ， 然 后 继续 做 别 的 
事情 。 它 还 提供 了 一 个 函数 ， 在 服务 器 调用 完成 后 调用 它 。 这 个 函数 
通过 服务 器 返回 的 数据 被 调用 (回调 因此 而 得 名 ) ， 这 时 数据 已 经 准 
SMA ° 
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商店 把 东西 放 到 柜台 后 面 ， 你 必须 询问 售货员 ， 并 等 待 她 取 来 你 想 要 
的 东西 ， 这 束 像 刚才 所 示 的 PHP 程 序 。 男 一 种 方式 是 ， 一 些 商店 有 一 
个 熟食 柜台 ， 你 可 以 订购 并 得 到 一 个 订单 号 。 你 可 以 离开 去 买 别 的 东 

， 等 订单 准备 束 绪 时 取 走 。 这 种 情况 束 像 一 个 回调 。 


通常 ， 一 个 快速 的 操作 可 以 是 阻塞 式 的 ， 因 为 需要 马上 返回 其 所 
请 求 的 数据 。 一 个 缓慢 的 操作 ， 例 如 调用 服务 器 可 能 需要 伦 费 几 秒 钟 
的 时 间 ， 应 该 是 无 阻塞 的 ， 并 通过 一 个 回调 函数 返回 其 数据 。 函 数 中 
存在 回调 函数 选项 将 为 计算 运行 一 个 操作 所 需 的 相对 时 间 提 供 民 好 的 
线索 。 在 单线 程 语 言 如 JavaScript 中 ， 画 数 阻 窗 大 等 行 网 络 或 用 户 时 ， 


浏览 器 不 可 能 不 锁定 。 


因此 ， 策 略 地 使 用 回调 是 掌握 JavaScript 重 要 的 一 步 ， 知 道 它 们 什 
么 时 候 触 发 。 例 如 ， 当 使 用 Ajax 的 数据 存储 对 象 时 ， 数 据 一 两 秒 后 殉 


没有 了 。 使 用 一 个 闭 包 〈 见 本 章 后 面 的 * 闭 包 ”) 来 创建 回调 函数 是 处 
理 数据 加 载 的 正确 方法 。 在 JavaScript 中 所 有 这 些 外 部 的 IO (数据 库 、 
调用 服务 器 ) 都 应 该 是 非 阻塞 的 ， 因 此 学 习 使 用 财 包 和 回调 至 关 重 
要 o 


在 一 些 应 该 避免 的 例外 情况 下 ，JavaScript 的 MO 不 会 阻塞 。 三 个 主 
要 的 例外 是 窗口 方法 alert()、confirm() 和 prompt()。 从 这 三 种 方法 调用 
开始 到 用 户 关闭 对 话 框 的 那 一 刻 ， 它 们 阻塞 了 页 面 上 的 所 有 
JavaScript。 此 外 XHR 对 象 可 以 使 Ajax 以 同步 模式 调用 服务 器 ， 此 方式 
在 Web Worker 中 可 放心 使 用 ， 但 是 在 主 窗口 中 它 会 引起 浏览 器 UI 锁 
定 ， 应 避免 使 用 。 


强大 的 Lambda 函 数 


从 PHP 或 其 他 程序 语言 转向 JavaScript 开 发 的 程序 员 ， 往 往 会 像 在 
他 们 用 过 的 语言 中 那样 处 理 JavaScript 函 数 。 虽 然 这 样 使 用 JavaScript 男 
数 也 可 以 ， 但 是 却 错过 了 很 多 使 得 JavaScript 函 数 变 得 强大 的 东西 。 


JavaScript 函 数 可 以 用 函数 语句 〈 见 例 2-2) 或 函数 表达 式 〈 见 例 2- 
3) 创建 。 这 两 种 形式 看 起 来 非常 相似 ， 痢 产生 一 个 名 为 square 的 男 
数 ， 该 函数 可 以 计算 数 的 平方 。 然 而 也 有 一 些 关键 的 差别 。 第 一 种 形 
式 是 加 载 方式 ， 这 束 是 说 ， 该 贸 数 将 在 闭 包 的 开始 被 创建 。 所 以 想 有 
条 件 地 定义 函数 时 ， 不 能 使 用 函数 语句 ， 因 为 JavaScript 不 会 等 行 条 件 
语句 执行 后 再 决定 是 否 要 创建 国 数 。 在 实践 中 ， 大 多 数 浏览 船 允许 把 
函数 放 在 if 里 面 ， 但 这 不 是 一 个 好 主意 ， 因 为 在 这 种 情况 下 浏览 套 做 
的 事情 可 能 会 有 所 不 同 。 如 果 一 个 函数 的 定义 应 该 是 有 条 件 的 ， 那 么 
用 函数 表达 式 更 好 。 l 


例 2-2: 函数 语句 


function square(x){ 
return x*x; 

}// 注 意 : 少 一 个 “ ?7 

例 2-3: 画 数 表达 式 

var square=function(x){ 
return x*x; 


在 第 二 种 形式 一 一 函数 表达 式 中 ， 函 数 在 程序 的 流程 执行 到 这 一 
扩 时 创建 。 可 以 有 条 件 地 定义 一 个 函数 ， 或 在 一 个 较 大 的 语句 内 部 定 
义 函 效 。 


此 外 ， 芳 数 表 达 式 没有 给 函数 命名 ， 因 此 画 数 可 以 为 匿名 。 然 

， 这 个 例子 在 等 号 的 左 侧 指定 了 一 个 函数 名 (square) ， 这 是 个 好 
主意 ， 原 因 有 两 个 。 首 爷 ， 当 调试 程序 时 ， 指 定 一 个 函数 名 ， 让 你 可 
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anonymous。 如 采用 Firebug 跟 唆 堆 栈 时 看 到 一 个 堆栈 中 有 九 个 或 十 个 
G SIAR RIBIR | EK, HIA KRE 
称 ， 还 能 够 根据 需要 递归 调用 的 函数 。 


JavaScript 中 的 函数 表达 式 可 以 在 任何 能 用 表达 式 的 地 方 使 用 。 
此 ， 可 以 像 例 2-3 一 样 把 函数 分 配给 一 个 变量 ， 也 可 以 分 配给 一 个 对 象 
成 员 或 传递 给 函数 。 


JavaScript 范 数 比 C 函 数 更 像 Lisp 中 的 Lambda 表 达 式 。 在 C 类 型 语 
言 中 (包括 Java 和 C++) ， 画 数 基本 上 是 一 个 静态 的 东西 。 它 不 是 一 
个 可 以 操作 的 对 象 。 昌 然 可 以 把 一 个 对 象 作 为 参数 传递 给 函数 ， 但 是 
几乎 没有 能 力 来 构建 复合 对 象 ， 或 其 他 扩展 对 象 。 


早 在 20 世 纪 50 年 代 ， 当 时 Lisp 刚 刚 被 创建 ， 麻 省 理工 学 院 的 人 深 
受 Alonzo 教 会 Lambda Caculus (演算) 的 影响 ， 和 演算 提供 了 一 个 处 


理 函 数 和 递归 的 数学 框架 。 因 此 ， 约 翰 : 麦 卡 锡 用 关键 字 Lambda 来 处 理 
匿名 函数 。 这 种 做 法 已 传播 到 其 他 语言 中 ， 例 如 Perl、Python 和 
Ruby。 虽 然 关 键 字 "Lambda" 没 有 出 现在 JavaScript 中 ， 但 是 其 函数 做 着 
同样 的 事情 。 


JavaScript 中 的 函数 如 同 Lisp 语 言 中 的 函数 一 样 是 “一 等 公民 ”。 
JavaScript 中 的 函数 仅仅 是 一 个 具有 特殊 属性 可 以 被 执行 的 数据 。 男 数 
可 以 像 JavaScript 的 所 有 其 他 变量 一 样 操 作 。 在 C 和 类 似 的 语言 中 ， 玉 
数 和 数据 作用 于 两 个 独立 的 空间 。 而 在 JavaScript 中 ， 函 数 束 古 数 据 ， 
并 且 可 以 用 在 每 一 个 可 以 使 用 数据 的 地 方 。 画 数 可 以 分 配给 一 个 变 
量 、 作 为 参数 传递 或 作为 函数 的 返回 值 。 在 JavaScript 中 ， 将 一 个 函数 
传递 到 男 一 个 函数 是 很 常见 的 操作 。 例 如 ， 可 以 用 于 为 一 个 按钮 点 击 
创建 回调 函数 〈 见 例 2-4) 。 男 外 ， 还 可 以 通过 简单 的 赋值 改变 函数 。 


例 2-4: ExtUS 用 函数 作为 处 理 函 数 的 按钮 


var button=new Ext.Button({ 
text: 'Save', 

handler: function(){ 

// 这 里 进行 保存 

} 

}); 


[1] 这 个 地 方 原文 中 是 “函数 语句 ”， 应 该 是 作者 写 错 了 ， 因 为 上 面 说 
了 “ 当 你 想 有 条 件 地 定义 函数 时 ， 不 能 使 用 函数 语句 ”。 
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如 果 没有 闭 包 (Closure) WRAAE, HA ÆJavaScript H W PE 
为 第 一 类 对 象 的 函数 束 不 太 有 价值 了 。 ee 
JavaScript 中 的 又 一 个 元 素 。 当 一 个 函数 在 JavaScript 中 创建 时 ， 该 函数 
可 以 对 其 生成 环境 中 任何 语法 空间 的 变量 进行 访问 。 即 使 最 初 定义 它 
们 的 上 下 文 已 执行 完毕 ， 但 是 这 些 变量 仍然 可 用 。 该 变量 可 以 被 内 部 

函数 和 外 部 函数 访问 、 修 改 。 


闭 包 对 构建 回调 是 有 用 的 。 画 数 任意 时 刻 都 可 能 运行 来 啊 应 一 些 
事件 ， 但 是 需要 知道 之 前 发 生 了 什么 。 
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闭 包 是 JavaScript 函 数 最 强大 的 特征 之 一 。 在 简单 的 情况 下 ， 它 可 
用 于 创建 访问 外 层 空间 变量 的 函数 ， 从 而 允许 回调 访问 控制 画 数 中 的 
数据 。 然 而 更 强大 的 是 能 够 创建 把 变量 绑 定 到 一 个 范围 内 的 目 定义 函 
数 。 


如 例 2-5 所 示 ，DOM 元 素 或 CSS 选 择 器 "el" 被 包装 在 一 个 函数 中 ， 
通过 一 个 简单 的 函数 调用 对 HTML 内容 进行 设置 。 外 层 函 数 


(factory) 将 "el" 元 素 绑 定 到 内 层 函 数 所 使 用 的 一 个 变量 ， 通 过 jQuery 
设置 DOM 元 素 。 外 层 函 数 将 内 层 函 数 作为 返回 值 返回 。 这 个 例子 的 结 
果 是 把 变量 updateElement 的 值 设置 为 内 层 set 函 数 ， 并 且 参 数 el 的 值 是 
一 个 已 绑 定 的 CSS 选 择 器 。 当 一 个 程序 调用 update Element 并 且 传 入 
CSS 选 择 器 后 ，updateElement 会 返回 一 个 可 用 于 设置 与 该 HTML 相 关 
的 HTML 元 素 的 函数 〈 即 用 于 设置 该 CSS 选 择 器 选中 的 HTML 元 素 的 画 
数 ) 


例 2-5: 简单 闭 包 


var factory=function factory(el) 
return function set(html) 

{ 

$(e1).html(htm1); 

} : 


也 可 以 创建 多 个 在 同一 空间 内 关闭 的 画 数 。 如 果 一 个 画 数 把 多 个 
画 数 返回 到 一 个 对 象 或 数组 中 ， 所 有 这 些 画 数 都 有 机 会 获得 创建 画 数 
的 内 部 变量 。 


例 2-6 所 示 代 码 同 浏 览 絮 的 工具 栏 添加 了 一 个 tools 数 组 中 定义 的 按 
每 个 按钮 都 有 其 自己 的 处 理 程序 (命名 为 dickHandler) AKAN 
访问 调用 函数 的 变量 ， 并 将 button 和 tool 变 量 藤 入 到 它 的 操作 中 。 您 只 


需要 轻松 地 在 tools 数 组 中 添加 或 减 去 一 个 元 素 更 新 应 用 程序 ， 定 义 了 
所 有 功能 的 按钮 整 会 出 现 或 消失 。 


例 2-6: 按钮 闭 包 


$('document').ready(function Ready(){ 
var button, tools; 

tools=['save', 'add', 'delete']; 
console. info($('div#toolbar')); 

tools. forEach(function(tool) { 
console.info(tool); 

var button=$('<button>').text(tool).attr({ 
css: 'tool' 

}).appendTo( 'div#toolbar'); 
button.click(function clickHandler(){ 
console.info(tool, button); 
alert("User clicked"+tool); 
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而 ， 无 论 Google Chrome 的 开发 工具 还 是 Firebug 都 能 显示 已 闭 包 的 变量 
列表 。 


在 Firebug 中 ， 可 以 在 Script 选项 卡 的 "Watch" 中 找到 空间 链 。 在 当 
前 空间 下 的 所 有 变量 是 一 个 上 升 到 主要 "window" 对 象 的 空间 层次 。 


例如 ， 在 Google Chrome 的 开发 工具 中 ， 当 代码 在 断 点 停止 时 ， 硬 
侧 栏 Scope Variables 标 记 的 "Closure" 标 记 将 显示 当前 函数 〈 见 图 2-1) 


的 内 部 变量 。 在 这 种 情况 下 ， 它 显示 我 们 点 击 了 "delete" 按 钮 ， 


了 按钮 本 身 引 用 的 jQuery 对 象 。 


Developer Tools - fib: ///0;/Work/ourrent/(choz/testhtml 
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函数 式 编程 是 一 种 与 Lisp、Scala、Erlang、EF# 或 者 Haskall 语 言 相 
关 的 方法 ， 在 JavaScript 中 也 相当 好 用 。 函 数 式 编程 依赖 于 一 些 基 本 假 


函数 是 该 语言 的 “一 等 公民 ”， 并 可 以 在 任何 能 使 用 其 他 值 的 地 方 


可 以 通过 组 合 简单 的 画 数 构建 复杂 的 行为 。 


函数 有 返回 值 ， 在 多 数 情 况 下 ， 对 于 同样 的 输入 给 定 函 数 总 是 返 
回 相同 的 值 。 


在 数学 中 ， 画 数 没有 “副作用 ”， 如 经 典 数学 函数 y=sin (x) 。 它 
只 返回 一 个 y 可 以 存储 的 值 ， 而 不 会 改变 x 或 程序 中 任何 全 局 状态 的 东 
西 。 确 保函 数 是 “ 纯 的 ”( 没 有 “副作用 ”) ， 这 种 做 法 使 函数 能 在 程序 
中 的 任何 地 方 调用 ， 而 不 会 发 成 一 些 奇 怪 的 事情 。 在 编程 时 ， 副 作用 
所 禹 来 的 问题 是 ， 可 能 会 导致 奇怪 的 、 非 常 难以 追踪 的 依赖 关系 。 如 
果 调 用 的 方法 可 能 会 导致 数 据 在 其 他 地 方 破坏 ， 束 会 使 潜在 的 错误 大 
大 增加 ， 那 将 是 非常 难以 追踪 的 。 


JavaScript 函 数 可 能 有 “副作用 ”， 而 且 也 没有 内 置 的 方法 防止 本 数 
产生 副作用 。 此 外 ，JavaScript 函 数 默认 不 返回 值 ， 除 非 已 经 显 式 调用 
了 一 个 return 语 句 来 返回 一 个 值 。 在 没有 返回 语句 时 函数 将 返回 


undefined ° 


当 应 用 函数 式 编 程 时 ， 程 序 员 往往 形成 一 种 工作 模式 ， 使 用 许多 
非常 小 的 画 数 ， 每 个 函数 往往 只 用 两 三 行 代码 来 完成 一 个 目标 。 这 是 
一 种 很 好 的 设计 技术 ， 因 为 通 钊 很 短 的 轴 数 更 容易 保证 正确 性 ， 测 试 


营 见 的 情况 是 ， 可 以 通过 组 合 简单 函数 生成 复杂 的 行为 。 可 以 用 
人 简单 的 函数 生成 一 个 函数 链 ， 使 链 中 的 每 个 函数 都 返回 this， 从 而 允许 
调用 下 一 个 范 数 。 


jQuery 类 库 经 常 使 用 例 2-7 所 示 的 函数 链 。 在 这 个 例子 中 ，jQuery 
找到 一 个 DOM 项 ， 设 置 其 文本 ， 淡 化 到 视图 ， 然 后 给 它 设置 一 个 单 击 
处 理 函 数 ， 用 第 二 个 DOM 链 隐 茂 它 。 


例 2-7， 用 闭 包 生成 函数 链 


$('div.alert').text("Message").fadein 
(2000) .click( 

function() 

{ 

$(this).fadeout (2000); 


) ; 


函数 式 编 程 的 一 个 非常 强大 的 模型 是 高 阶 函 数 。 高 阶 函 数 用 一 个 
函数 作为 参数 抽象 出 特定 的 行为 ， 而 将 通用 行为 留 在 外 层 函 数 中 。 

高 阶 函 数 的 一 个 很 好 的 例子 是 数组 映射 画 数 。 本 章 后 面 的 “数组 迭 
代 操 作 ? 取 一 个 数组 并 返回 一 个 痢 的 数组 ， 新 的 数组 是 被 传递 的 函数 应 
用 到 数组 的 每 一 个 元 素 得 到 的 结果 。 该 模型 的 应 用 范围 很 广泛 ， 不 仅 
仅 征 数组 操作 。 作 为 通用 模型 ， 高 阶 函 数 可 用 于 需要 具体 修改 通用 行 
为 的 任何 地 方 。 


jQuery 库 的 接口 往往 有 利于 函数 式 编程 。jQuery 接 口 特意 优化 了 
从 页 面 中 选择 一 组 BOM 斑点 的 方法 ， 然 后 为 这 些 市 点 的 交互 提供 一 个 
函数 接口 。 


此 外 多 数 jQuery 方 法 返回 一 个 值 ， 使 它们 能 够 被 链接 。 例 如 ， 要 
在 页 面 中 找到 比 设置 民 寸 党 的 所 有 的 图 片 ， 可 以 选择 页 面 中 的 所 有 图 
片 ， 过 滤 挥 那些 小 于 300 像 素 的 ， 然 后 按 比 例 缩放 列表 中 剩 下 的 图 片 。 


例 2-8 正 是 这 么 做 的 。 它 选择 文档 中 的 所 有 图 片 (任何 含有 img 标 
记 的 文件 ) ， 然 后 过 滤 那 些 宽度 大 于 300 像 素 的 (maxWidth) ， 并 按 
比例 缩放 。 通 过 位 化 过 滤器 和 缩放 函数 ， 可 以 确信 代码 将 按 我 们 的 意 
图 工作 。 


例 2-8: 缩放 图 片 


var ScaleImages=(function(maxwidth ) 
return function() 

{ 

$('img').filter(function() 


return$(this) .width() >maxwidth; 
}).each(function() 


{ 
$(this).width(maxwidth) ; 
}); 


}; 
} (300) ); 


当 在 一 个 耗 时 的 程序 中 处 理 操作 列表 时 ， 例 如 Ajax 调用 ， 有 时 用 
一 个 请 求 发 送 整 个 列表 到 服务 右 是 不 现实 的 。 例 如 ， 发 送 整个 列表 可 
能 会 导致 服务 此 超时 。 


在 这 种 情况 下 裔 历 列表 ， 将 列表 看 做 一 个 头 部 和 尾部 将 非 第 有 
用 。 取 列表 的 第 一 个 元 素 (或 前 儿 个 元 素 ) 进行 处 理 ， 然 后 通过 使 用 
递归 处 理 列表 的 其 余部 分 ， 直 到 列表 为 空 〈 见 例 2-9) 。 


我 已 经 用 这 个 方法 将 数据 添加 到 一 个 REST 界 面 。 每 调用 界面 一 次 
平均 需要 大 约 1s， 所 以 在 Ajax 调 用 中 调用 它 500 次 很 不 实际 。 在 这 种 情 
况 下 ， 可 以 通过 递归 处 理 列表 。 


注意 : 术语 Ajax 和 XHR 究 竞 是 什么 ? JavaScript 对 象 被 称 为 
XMLHttpRequest， 缩 写 为 XHR“。Ajax 来 目 "Asynchronous JavaScript 


and XML" (异步 JavaScript 和 XML) ， 由 Jesse James Garret 创 建 。 事 实 


上 ， 在 许多 情况 下 ， 通 过 网 络 发 送 的 数据 不 是 XML ， 而 可 能 是 JSON 
或 其 他 数据 格式 。 


例 2-9: 列表 递归 


/列表 递归 示例 */ 

function iterateAjax(tasks) { 

function iterator(tasks){ 

$.ajax({ 

url: 'index.php', 

data: tasks[0], 

success: function(data, status, XMLHttpRequest ) { 
if(tasks.length>0){ 

// 用 这 里 的 结果 做 点 事 儿 

iterator(tasks.slice(1)); 


} 
}); 


iterator(tasks); 


虽然 只 用 函数 式 编程 风格 建立 一 个 完整 的 单 页 Web 应 用 程序 是 不 
实际 的 ， 但 是 不 应 该 忽视 其 中 许多 有 用 的 想法 。 人 例如， 函数 式 编程 对 
使 用 Web Worker 非 常 适 合 〈 见 第 8 章 ) 。 


JavaScript 中 关于 函数 式 编程 没有 介绍 太 多 ， 但 相当 多 的 其 他 语言 
可 以 应 用 到 JavaScript 中 。 了 解 函 数 式 编程 的 更 多 信息 ， 请 参阅 下 列 书 


LA 
FE: 


- «Real World Haskell) , 1# Bryan O'Sullivan ` John Goerzen ` 


Donald Bruce Stewart (O'Reilly) 


- «Programming Scala) ， 作 者 Dean Wampler ` Alex Payne 
(O'Reilly) 


- «Structure and Interpretation of Computer Programs) ， 作 者 Harold 


Abelson ` Gerald Jay Sussman (MIT Press) 


原型 及 如 何 扩 展 对 象 


JavaScript 中 的 一 切 都 可 以 有 附加 的 方法 。 每 一 个 元 素 都 有 一 些 供 
程序 员 使 用 以 提高 有 效 性 的 基本 方法 。JavaScript 基 元 如 布尔 、 字 符 串 
和 数字 作为 对 象 部 有 第 二 次 生命 。 从 基 元 到 对 象 的 转换 是 透明 的 ， 所 
以 可 以 在 基 元 上 应 用 这 些 方法 。 实 际 上 ， 发 生 的 事情 是 将 一 个 简单 的 
E (例如 一 个 字符 串 ) 转换 为 一 个 对 象 ， 如 果 需 要 的 话 再 转换 回来 。 


对 于 字符 串 ， 可 以 调用 大 量 的 方法 来 操作 。 一 些 方法 能 按 位 修改 
字符 串 ， 大 部 分 将 返回 一 个 新 的 字符 串 。 在 Mozilla 开 发 者 网 站 
(http://developer.mozilla.org/en/javascript) 上 可 以 找到 一 个 完整 的 列 
表 ， 这 里 仅 列 出 最 重要 的 几 个 : 


string.indexOf() 


返回 字符 串 中 第 一 个 与 给 定子 串 匹 配 的 子 串 序号 ， 当 没 找到 时 则 
返回 -1。 


string.lastIndexOf() 
与 indexOfO 相 同 ， 不 过 是 从 结尾 开始 。 


string.match() 


在 一 个 字符 串 匹 配 一 个 正则 表达 式 。 


string.replace() 


替换 正则 表达 式 (指定 为 函数 或 字符 串 ) 


string.split() 


把 一 个 字符 串 分 割 成 一 个 子 吕 数组。 


string.slice() 
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然而 ， 有 时 会 遇 到 预定 义 方 法 不 够 ， 又 需要 一 些 目 定 义 功能 的 情 
况 。 在 这 种 情况 下 ，JavaScript 提 供 了 一 种 不 常用 但 很 强大 的 特性 : 一 
种 扩展 内 置 对 象 的 方法 。 虽 然 你 总 是 可 以 用 一 个 简单 赋值 给 JavaScript 
对 象 分 配 一 个 方法 ， 但 是 这 不 一 定 是 最 好 的 方式 。 如果 想 给 所 有 字符 
串 添 加 一 个 方法 ， 可 以 把 该 方法 附加 给 String.prototype 对 象 。 在 
JavaScript 对 象 系统 中 ， 每 个 对 象 都 继承 目 原型 链 ， 因 此 通过 在 链 中 的 
某 个 地 方 增加 方法 ， 可 以 添加 到 整个 这 类 对 象 。 


下 面 用 一 个 例子 来 说 明 这 个 概念 。 目 标 是 创建 一 个 名 为 populate 的 
新 方法 ， 把 值 用 一 个 模板 替换 。 模 板 束 是 调用 该 方法 的 对 象 ， 例 如 : 


Hello{name} 


该 字符 串 应 该 在 大 括号 中 包 合 程 序 员 想 用 指定 值 奉 换 的 关键 字 。 
Populate 的 参数 是 一 个 对 象 ， 在 模板 中 指定 关键 字 和 替代 值 。 因 此 ， 如 
果 参 数 包 含 一 个 名 为 name 的 属性 ， 则 name 的 值 就 会 插入 字符 串 中 。 


例 2-10 的 代码 运行 后 ，populate 方 法 就 会 附加 到 所 有 字符 串 中 。 当 
populate 被 调用 时 ， 将 引用 标准 的 JavaScript 对 象 this 调 用 的 字符 串 。 有 
了 this 的 值 ，populate 方 法 可 以 利用 简单 的 蔡 换 在 它 的 参数 中 插入 值 。 


在 一 般 情 况 下 ， 最 好 不 修改 调用 了 方法 的 对 象 ， 但 是 要 返回 一 个 新 的 
对 象 实例 (函数 式 编 程 想 法 ) 


例 2-10: 替换 字符 串 标 识 


String.prototype.populate=function populate(params ){ 
var str=this.replace(/\{\w+\}/g, function stringFormatInner (word) 


return params[word.substr(1, word.length-2) ]; 
}); 

return Str; 

}; 

$('.target').html("Hello{name}".populate({ 


name: "Zach" 


})); 
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告 : 扩展 基本 对 象 的 原型 ， 例 如 Object、Array 等 ， 有 时 会 破坏 
类 库 。 徘 魁 祸首 通常 是 要 创建 的 属性 已 经 存在 于 对 象 中 。 要 先 确 认 正 
在 创建 的 属性 不 存在 ， 然 后 再 添加 属性 ， 并 仔细 测试 。 


事实 上 ， 在 JavaScript 中 扩展 基本 类 型 是 一 种 有 很 大 争议 的 实践 。 
有 人 说 ， 不 应 该 这 么 做 。 我 认为 这 是 一 个 强大 的 工具 ， 不 能 全 副 否 


F 


KE ° 


Number 原 型 的 工作 方式 与 字符 串 原 型 完全 相同 。 因 此 ， 可 以 定义 
一 个 新 的 方法 ， 处 理 可 能 提出 的 任何 需求 。 例 如 ， 如 采 一 个 应 用 程序 


需要 定期 请 求 计算 平方 数 ， 可 以 非常 容易 地 添加 该 方法 〈 见 例 2- 


11) 
例 2-11: 使 用 Number.prototype 


Number .prototype.square=function square(){ 
return this*this; 

}; 
6.square(); //36 


用 原型 扩展 函数 


除了 数据 对 象 如 字符 串 和 数组 外 ， 画 数 也 有 原型 ， 可 以 用 来 创建 
非常 强大 的 复合 函数 。 通 过 把 简单 函数 组 合成 较 大 的 单元 ， 使 用 
Function.prototype 给 Function 对 象 添加 方法 ， 可 以 把 复杂 的 逻辑 分 制 成 
许多 简单 的 情况 。 事 实 上 ， 许 多 工具 包 正 是 这 样 工 作 的 ， 并 提供 了 一 
些 方法 来 完成 这 些 任 务 。 


有 一 个 原型 的 实例 ， 可 以 通过 执行 它 提高 代码 的 健壮 性 ， 那 就 是 
在 函数 执行 之 前 添加 错误 检查 。 在 例 2-12 中 ，cube 函 数 运行 时 不 检查 
其 输入 是 否 为 数字 。 代 码 中 函数 包装 在 一 个 负责 检查 的 拦截 器 中 。 每 
当 cube 在 后 面 被 调用 时 ， 拦 截 器 先 运行 ， 如 果 输 入 的 是 一 个 数字 再 调 
用 cube。 


例 2-12: 函数 拦截 器 


Function.prototype.createInterceptor=function 
createInterceptor (fn) { 

var scope={}; 

return function(){ 

if(fn.apply(scope, arguments) ){ 

return this.apply(scope, arguments); 

} 

else{ 

return null; 

} 

}; 


var interceptMe=function cube(x){ 


console.info(x); 
return Math.pow(x, 3); 


}; 

var cube=interceptMe.createInterceptor(function(x){ 
return typeof x==="number"; 

}); 


举 一 个 更 广泛 的 例子 ， 你 要 用 常规 方法 计算 斐 波 那 契 
(Fibonacci) 数列 。 一 个 非常 简单 暴力 的 方法 类 似 于 例 2-13。 然 而 ， 
fib (40) 这 种 琐碎 函数 运行 起 来 需要 相当 长 的 时 间 。 


例 2-13: 简单 辈 波 那 奖 数列 计算 方法 


var fib=function fib(n){ 
if (n===1| | n===2) { 
return 1; 


} 
return(fib(n-1)+fib(n-2)); 
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余 计算 。 如 采 让 Fibonacci 方 法 对 每 个 值 只 作 一 次 计算 ， 运 行将 快 很 
o 我 们 可 以 通过 用 拦截 器 的 方法 包装 Fibonacci 函 数 ， 缓 存 每 次 迭代 
的 结果 ( 见 例 2-14) 。 拦 截 器 不 需要 知道 Fibonacci 数 列 是 如 何 产 生 
的 ， 只 需要 知道 对 于 一 个 给 定 的 输入 ， 应 该 总 是 产生 相同 的 输出 。 所 
以 一 旦 fib (n) 被 计算 ， 查询 就 变 得 非常 简单 ， 如 果 没 有 查询 到 结 
果 ， 可 以 通过 计算 得 到 。 


例 2-14 由 两 部 分 组 成 : 缓存 方法 和 实际 的 Fibonacci 数 列 生成 器 
缓存 方法 不 知道 任何 关于 Fibonacci 数 列 的 事情 ， 除 了 一 个 事实 : 一 个 
给 定 的 输入 值 将 总 是 返回 相同 的 值 ， 这 可 以 被 缓存 。 因 此 ， 当 
decoratedFib (32) 被 调用 时 ， 缓 存 会 先 检 查 是 否 已 经 为 32 计 算出 了 结 
果 。 如 果 有 结果 ， 它 只 需要 直接 返回 。 如 果 还 没有 结束 ， 它 会 开始 计 
算 。Fibonacci 数 列 的 计算 是 非常 复杂 的 递归 ， 因 此 计算 32 的 Fibonacci 
数列 必须 先 计算 31、30 等 。 该 画 数 将 递归 地 寻找 结果 ， 直 到 找到 为 
止 。 如 果 这 是 函数 第 一 次 运行 ， 将 在 种 子 值 中 找到 n=2 和 n=1。 


虽然 很 多 人 不 会 在 Fibonacci 数 列 上 花费 太 多 时 间 ， 但 是 它 是 一 个 
很 好 的 使 用 函数 原型 的 例子 ， 可 以 用 两 个 很 短 的 函数 结合 得 到 非常 强 
大 的 结果 。 


注意 这些 例子 复杂 多 了 ， 其 实 是 为 了 显示 如 何 从 函数 缓存 没有 
副作用 的 函数 结 末 。 实 际 上 这 可 能 不 是 写 这 个 代码 最 好 的 方式 。 


例 2-14: 高 级 斐 波 那 契 数列 计算 方法 


var SmartFib=(function makeFib(){ 
var fibsequence=[0, 1, 1]; 

var fib=function fib(n){ 
if(fibsequence[n] ){ 

return fibsequence[n]; 

} 

fibN=fib(n-1)+fib(n-2); 
fibsequence[n]=fibN; 

return fibsequence[n]; 


return fib; 


}()); 


Function.prototype.decorate=function Decorate(params){ 
return params.decorator(this,params.initialData); 


var cache=function cache(lambda, initial){ 
return function cacheRunner(n){ 
if(initial[n]!==undefined){ 

return initial[n]; 

} 

else{ 

initial[n]=lambda(n); 

return initial[n]; 

} 

}; 

var decoratedFib=function fib(n){ 

return decoratedFib(n-1)+decoratedFib(n-2); 
}.decorate({ 

decorator: cache, 

initialData: [0, 1, 1] 

3); 


假设 一 个 函数 定期 运行 啊 应 用 户 输入 ， 但 古 在 给 定 的 时 间 内 运行 
次 数 不 能 超过 一 次 。 这 很 简单 ， 当 该 画 数 最 后 被 调用 时 ， 用 函数 原型 
创建 一 个 要 存储 的 包 闭 函数 ， 让 它 在 指定 时 间 内 不 能 再 次 运行 。 可 以 
根据 应 用 程序 的 需要 选择 不 运行 它 ， 或 者 抛 出 一 个 异 音 。 


在 另 一 面 ， 也 可 以 给 函数 创建 一 个 方法 ， 在 一 个 延 时 后 执行 或 定 
期 执行 。 通 币 ， 一 个 任务 需要 在 一 个 事件 后 运行 ， 但 不 应 该 运行 过 
频繁 。 例 如 ， 你 可 能 要 检查 用 户 的 输入 ， 但 是 每 次 按键 后 都 运行 检查 
有 些 过 分 。 设 置 一 个 每 250ms 运 行 一 次 的 方法 可 以 解决 这 个 问题 。 


i 


这 有 两 种 实现 方式 。 第 一 ， 可 以 运行 一 次 该 方法 ， 并 且 在 到 达 指 
定时 间 前 不 允许 它 再 次 运行 。 第 二 ， 可 以 创建 一 个 方法 ， 使 它 在 调用 


后 会 以 一 定时 间 间 隔 运 行 ， 并 且 在 调用 时 复位 定时 器 。 如 果 我 们 的 目 
的 是 当 用 户 打字 停止 或 一 些 其 他 的 事件 暂停 时 运行 采 些 代码 ， 这 种 模 
式 将 非常 有 用 。 在 实践 中 ， 一 个 痢 的 方法 将 作为 包 逆 了 基本 JavaScript 
的 setTimeout() 和 setInterval0) 方 法 的 包 六 器 运行 ， 使 用 更 加 方便 。 也 可 
以 创建 一 个 方法 根据 预 设 安排 今后 的 任务 或 取消 现 有 的 任务 。 


柯 里 化 和 对 象 参数 


在 函数 式 编程 中 ， 一 个 常见 的 编程 模型 是 “ 柯 里 化 ”currying) 一 
个 函数 。 因 Haskell 语 言 的 一 个 特点 而 得 名 ， 柯 里 化 是 指 将 几 个 参数 组 
合成 一 个 单一 对 和 象 的 做 法 ， 这 样式 可 以 把 它们 作为 一 个 参数 传递 给 函 
数 。 如 林 一 个 函数 需要 大 量 的 参数 ， 在 JavaScript 中 最 好 是 放弃 长 长 的 
参数 列表 ， 并 用 一 个 单一 对 象 作 为 参数 。 通 过 将 一 个 对 象 作 为 参数 ， 
可 以 把 各 种 选项 全 部 转换 成 名 称 / 值 对 。 这 样 做 的 好 处 之 一 是 ， 参 数 的 
顺序 变 得 无 天 紧要 。 此 外 ， 可 以 创建 一 些 或 全 部 的 参数 选项 。 对 于 接 
收 了 许多 选项 的 复杂 方法 会 有 很 大 帮助 。 特 别 对 一 些 ExUS 中 的 对 象 创 
建 方法 往往 非常 有 用 。 


柯 里 化 参数 的 最 简单 方法 是 创建 一 个 函数 ， 用 它 接 收 参数 块 ， 并 
返回 一 个 函数 ， 返 回 的 函数 将 以 预 完 提供 的 默认 参数 调用 原画 数 ( 见 
例 2-15) 。 这 样 就 可 以 建立 一 套 默 认 值 ， 不 必 每 次 都 指定 ， 同 时 允许 
调用 者 改变 他 们 想 要 修改 的 任何 参数 。 


例 2-15: 柯 里 化 示例 


Function.prototype.curry=function FunctionCurry(defaults) { 
var fn=this; 

return function(params) { 

return fn.apply(this, defaults.concat(params) ); 
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这 种 模式 也 可 以 应 用 于 创建 对 象 。 作 为 一 个 接受 参数 块 的 对 象 构 
造 钞 数 ， 可 以 用 一 个 目 定义 类 作为 对 象 的 子 类 ， 调 用 父 类 的 构造 画 
数 ， 调 用 时 子 类 将 用 一 套 默认 参数 履 兰 用 户 传递 的 参数 。 
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像 其 他 JavaScript 中 的 第 一 类 对 和 象 一 样 ， 数 组 也 有 方法 。 标 准 数 组 
有 一 些 为 程序 员 设 计 的 方法 。 在 较 新 版 本 的 Firefox 济 咒 器 中 (1.5 以 上 
版 本 ) ， 也 已 创建 了 一 些 标准 的 沈 代 方法 。 


这 些 操作 的 基本 思路 是 : 处理 一 个 lambda 范 数 ， 并 将 其 应 用 到 数 
组 中 的 每 个 元 素 ， 得 到 一 些 结果 。 通 过 几 个 小 函数 使 用 这 种 方法 ， 可 
以 处 理 一 个 数组 ， 并 创建 它 的 操作 集 ， 该 操作 集 可 以 建立 一 个 代数 数 
组 。 这 反 过 来 又 可 以 让 你 用 基本 的 操作 集合 建立 非常 强大 的 操作 集 。 


第 一 个 数组 方法 是 map()。map 函 数 包 售 一 个 数组 和 一 个 方法 作为 
参数 。 它 把 该 方法 应 用 到 数组 的 每 一 个 元 素 ， 并 用 返回 值 创建 一 个 新 
数组 。 所 以 给 定 一 个 数字 的 数组 ， 通 过 在 map0 中 简单 地 对 每 个 数字 应 
用 square 函 数 ， 可 以 创建 一 个 平方 数 的 数组 。 


注意 : 数组 方法 如 map 在 多 数 现代 浏览 右上 都 有 (它们 已 经 被 加 
入 正 9) 。 然 而 ， 如 果 没 有 也 可 以 添加 该 功能 。 在 Mozilla 的 开发 者 网 
站 上 可 以 找到 所 有 数组 方法 的 示例 代码 。 


调用 的 函数 接收 数组 的 当前 值 、 数 组 中 当前 位 置 的 序号 和 整个 数 
组 的 序号 作为 参数 。 通 第 情况 下 ，map 工 作者 函数 只 需要 查看 数组 的 
当前 值 ， 见 例 2-16 。 


例 2-16: 数组 Map 


[1, 2, 3, 4, 5].map(function(x){ 
return x*x; 


}); 
// 结 果 : [1, 4, 9, 16, 25] 


不 过 ， 在 一 些 情况 下 这 可 能 还 不 够 。 例 2-17 的 目的 是 显示 数组 中 
一 个 值 的 平均 运行 次 数 ， 因 此 每 个 元 素 需 要 了 解 其 相 邻 元 素 。 


例 2-17: 平均 运行 次 数 


function makeRunningAverage(list,size) 


return list.map(function(current, index, list) 
{ 

var start,end, win; 

/* 找 到 深 动 平均 值 窗口 的 开始 点 和 结束 点 */ 
start=index-size<0? 

O: 

index-size; 

/* 提 取 该 窗口 */ 

end=index+size> list.length? 

list.length: 

index+size; 

win=list.slice(start,end); /* 取 平均 值 */ 
return win.reduce(function(accumulator,current) 
{ 

return accumulator+current; 

}, 0)/(end-start); 

}); 

} 


使 用 for 循 环 操 作 数 组 元 素 有 几 大 优势 。 首 和 完 ， 它 逻辑 清晰 并 与 类 
代 代 码 隔离 ， 允 许 程 序 员 将 数组 视 为 一 个 整体 。 其 次 ， 在 避免 副作用 


方面 ， 作 为 内 部 函数 并 保持 函数 简短 ， 可 以 写 出 非常 健壮 的 代码 。 


另 一 个 应 考虑 的 情况 是 增加 回调 处 理 轴 数 。 用 一 个 for 循 环 通 历 元 
素 并 增加 处 理 函 数 ， 可 以 不 使 用 JavaScript 函 数 的 封闭 属性 。 你 可 能 会 
使 用 类 似 于 例 2-18 所 示 的 方法 ， 但 是 这 样 达 不 到 预期 目的 。 在 这 种 情 
况 下 ， 该 方法 将 总 古 显 示 最 后 一 个 元 素 。 在 这 里 具有 欺骗 性 的 是 ， 在 
任何 情况 下 引用 的 i 值 都 是 最 后 一 个 值 。 闭 包 总 是 能 知道 变量 的 当前 
值 ， 而 不 是 它 创 建 时 的 值 。 当 for 循 环 遇 历 列表 时 ， 会 改变 i 的 值 。 在 例 
2-19 中 ， 代 码 将 正 闻 工作 。 在 这 种 情况 下 ， 每 次 欠 代 所 引用 的 厄 点 都 
古 独 立 的 ， 它 处 于 函数 空间 的 内 部 。 
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例 2-18: for 循 环 


for(var i=0; i<nodes.length; i+=1){ 
nodes[i].bind('click', function(){ 
console.info(nodes[i]); 

}); 

t 


(52-19: HBE forEach 


nodes. forEach(function(node) { 
node.bind('click', function(){ 
console. info(node); 

}); 

}); 


下 一 个 要 注意 的 方法 是 fiter0。filter 对 数组 进行 处 理 ， 该 方法 返 
回 true 的 数组 子 集 。 例 2-20 中 的 迭代 函数 接收 与 map 函 数 相 同 的 参数 ， 
但 应 返回 一 个 布尔 值 。 


例 2-20:， Filter AX 


[1, 2, 3, 4, 5].filter(even); =>[2, 4] 


如 果 你 想 知 道 一 些 因 素 是 否 对 数组 的 所 有 元 素 都 为 真 ， 用 ev ery() 
方法 。 它 将 对 数组 应 用 一 个 方法 ， 如 果 该 方法 对 数组 中 的 所 有 元 素 都 
返回 true， 则 返回 true。 当 第 一 次 出 现 false 后 停止 。 


如 果 你 想 知道 有 些 条 件 是 否 对 列表 中 的 至 少 一 个 元 素 为 真 ， 可 以 
使 用 some() 方 法 。 如 果 列 表 中 至 少 有 一 个 元 素 返 回 true， 则 将 返回 
true。 与 every() 方 法 一 样 ， 它 将 只 评价 得 到 结果 的 元 素数 量 〈 当 第 一 次 
出 现 true 后 停止 ) 。 


JavaScript 的 数组 代数 中 的 最 后 两 个 操作 是 reduce() 和 
reduceRight()。 第 一 种 方法 把 一 个 数组 简化 成 一 些 简 单 的 值 。 这 对 一 
个 素 加 融和 是 非常 有 用 的 。 在 这 种 情况 下 ， 调 用 函数 也 接收 素 加 值 。 
此 ， 代 码 中 使 用 reduce() 对 列表 求 和 ， 束 会 如 例 2-21 所 示 。 你 可 以 提供 
一 个 可 选 的 初始 值 ， 作 为 第 一 次 硫 代 之 前 的 值 进行 传递 。 如 有 果 不 这 样 
做 ， 开 始 时 将 使 用 数组 的 前 两 个 元 素 。 


例 2-21: Reducer av 


[0, 1, 2, 3, 4, 5].reduce(function(prev, current) { 
return prev+current; 


initialValue); 


如 采 JavaScript 数 组 代数 不 提供 完成 任务 所 需要 的 方法 ， 使 用 
Array.prototype 对 象 来 创建 它 。 如 果 有 一 个 数 子 列表 需要 创建 该 列表 的 
一 个 标准 偏差 ， 例 如 ， 可 以 简单 地 套用 一 个 标准 差 的 方法 。 在 例 2-22 
中 为 数组 原型 增加 了 一 个 标准 偏差 方法 。 


例 2-22:， 标准 偏差 


var stdDev=[1, 2, 7, 2....].stddev(); 
Array.reduce.sum=function sum(){ 

var sum=this.reduce(function(previous, current) { 
return previous+current; 

3); 

return sum; 

}; 
Array.prototype.square=function squareArray(){ 
return this.map(function(x){ 

return x*x; 

}); 

Js 
Array.prototype.mean=function mean(){ 
return this.sum()/this.length; 

}; 
Array.prototype.standardDeviation=function standardDeviation(){ 
var mean=this.mean(); 

var inti=this.map(function(n){ 

return n-mean; 

}); 

var int2=int1.square(); 

var int3=Math.sqrt(int2.sum()/mean. length); 


}; 


// 给 它 起 个 短 点 的 名 字 
Array.prototype.stddev=Array.prototype.standardDeviation; 


你 也 可 以 扩展 对 象 


如 果 你 喜欢 map 函 数 而 且 硕 望 把 它 用 在 你 的 对 象 上 ， 也 可 以 在 代 
码 中 添加 它 。 可 以 创建 一 个 map 函 数 ， 不 仅 能 访问 JavaScript 对 象 中 的 
所 有 节点 ， 而 且 能 将 函数 递归 应 用 到 它 的 每 个 子 节 点 上 。 对 于 把 数据 
结构 转换 成 某 种 形式 的 节点 树 来 说 ， 这 可 能 非常 有 用 。 例 2-23 检 查 用 
尸 的 浏览 器 是 否 已 经 为 指定 对 象 定义 了 map() 和 人 filter()， 然 后 如 采 有 必 
要 的 话 定 义 该 画 数 。 


例 2-23: 将 map 和 filter 扩 展 为 对 象 


if(Object.prototype.map===undef ined ) { 
Object.prototype.map=function( fn) { 
var newObj={}; 

for(var i in this){ 
if(this.hasOwnProperty(i)){ 

newObj [i]=fn(i, this[i], this); 


return newObj; 


}; 


if(Object.prototype. filter===undef ined) { 
Object.prototype. filter=function(fn) { 
var newObj={}; 

for(var i in this){ 
if(this.hasOwnProperty(1i)){ 
if(fn(i,this[i], this) ){ 
newObj[i]=this[i]; 


} 


return newObj; 


}; 


JavaScript 对 象 可 以 成 为 现代 应 用 程序 中 任意 复杂 的 树 ， 能 够 使 用 
在 文件 系统 中 指定 路 径 类 似 的 方法 找到 特定 对 象 的 一 个 子 树 。 其 实 ， 
这 非常 容易 实现 。 


path 方 法 的 路 径 形式 与 UNIX 文 件 路 径 相 同 ， 
如 "path/to/ourdata"。 它 使 用 一 个 内 部 函数 ， 以 递归 方式 同 下 遍历 数据 
树 ， 直 到 找到 请 求 的 元 素 ， 并 返回 它 。 当 发 现 元 素 不 存在 时 ， 返 回 
undefined。 乍 一 看 ， 只 是 调用 了 每 个 欠 代 的 顶层 路 径 画 数 ， 这 种 做 法 
似乎 有 道理 。 但 这 不 是 一 个 好 主意 ， 因 为 有 可 能 在 某 些 情况 下 ， 路 径 
中 的 一 些 点 上 可 能 会 有 一 个 有 索引 的 数组 ， 如 果 Array.prototype 与 
Object.prototype 不 相同 ， 将 导致 大 代 被 破坏 。 通 过 在 内 层 函 数 中 进行 


搜索 ， 可 以 避免 这 个 问题 。 


例 2-24 所 示 的 方法 可 以 处 理 数组 和 对 和 象 。 如 果 路 径 的 一 部 分 是 一 
个 数字 、 数 组 和 对 象 ， 那 么 都 可 以 用 方 括号 标记 寻 址 ， 例 如 “[4]*”， 则 
将 取 组 中 的 第 5 个 元 素 。 


例 2-24: 通过 Path 选 择 


Object.prototype.path=function FindByPath(path) { 
var elementPath=path.split('/'); 

var findItter=function findItter(element, path) { 
// 如 果 元 素 为 空 则 直接 忽略 并 继续 查询 

if(path[0]===''){ 

return findItter(element, path.slice(1) ); 


} 
if(element [path[0] ]===undefined) { 
return undefined; 


} 

if(path.length===1){ 

return element[path[0]]; 

} 

return findItter(element[path[0]], path.slice(1)); 
}; 

return findItter(this,elementPath); 

}; 


第 3 草 ”测试 JavaScript 心 用 


测试 驱动 开发 的 软件 开发 方式 在 过 去 几 年 风靡 一 时 。 通 过 使 用 日 
动 化 且 可 重复 的 测试 方法 ， 可 以 帮助 开发 人 员 编写 更 加 高 质量 的 代 
码 ， 并 且 确 你 新 添加 的 代码 不 会 影响 原 有 的 功能 。 一 些 文 持 者 甚至 认 
为 测试 样 例 要 在 实际 代码 之 前 编写 。 


在 大 多 数 服务 器 端 开发 平台 中 ， 测 试 已 成 为 开发 的 一 个 关键 因 
素 。 在 PHP、Java、Ruby 等 开发 环境 中 已 经 出 现 Solid 测 试 框架 。 然 
而 ， 在 大 多 数 这 些 语 言 中 测试 的 标准 方法 对 JavaScript 不 起 作用 。 为 什 
么 ? 让 我 们 来 看 看 几 个 原因 。 


服务 硕 端 测试 套件 一 般 都 只 是 在 一 组 环境 下 的 测试 程序 。 如 果 一 
个 REST 服 务 是 用 Python 开发 的 ， 那 么 测试 人 员 可 以 用 几 个 安全 假设 创 
建 测试 。 例 如 ， 他 们 可 能 会 知道 ， 它 会 在 Linux 上 运行 的 Python3.0， 以 
及 所 有 文 持 软件 的 特定 版 本 。 


Web 应 用 程序 的 开发 人 员 没有 这 种 信心 。 用 户 将 使 用 Firefox、 
Internet Explorer、Chrome、Safari 以 及 Opera 浏 览 嚣 ， 而 且 每 种 浏览 器 
都 有 好 几 个 版 本 。 测 试 套件 必须 能 够 跨 浏 览 器 和 操作 系统 处 理 测试 ， 
因为 它们 中 的 每 一 个 都 略 有 不 同 。 


差别 主要 由 两 个 原因 产生 。 首 先 ， 语 言 本 身 在 不 同 的 浏览 器 间 就 
有 差异 。 例 如 ，Firefox 支 持 关 键 字 const， 而 Internet Explorer 不 支持 。 

其 次 ， 许 多 HTML 接 口 只 存在 于 某 些 浏览 器 或 浏览 器 版 本 中 。 本 书 中 
的 许多 JavaScript 接 口 也 只 存在 于 某 些 浏览 器 中 ， 测 试 必须 能 够 适应 这 
些 差异 并 在 需要 的 地 方 进行 退化 处 理 。 


Java 或 者 C 方 面 的 测试 专家 主要 讨论 一 些 单 元 测试 、 集 成 测试 等 测 
试 方法 。 这 些 测试 方法 的 原理 是 一 样 的 ， 只 是 目的 不 一 样 。 


单元 测试 是 一 种 运行 很 快 的 小 规模 测 坛 ， 一 次 测试 一 个 功能 
们 需要 遵循 的 准则 是 ， 对 于 任何 特定 的 画 数 、 方 法 或 接口 ， 如 果 给 定 
的 输入 古 x 那 么 程序 应 该 执行 的 功能 束 是 y。 它 们 测试 的 是 系统 的 基本 
逻辑 。 每 个 单元 测试 理论 上 应 该 只 测试 一 个 方法 或 者 一 小 块 代码 。 


集成 测试 十 一 种 相对 复 洒 的 测试 方法 ， 它 用 于 确认 所 有 代码 协同 
工作 的 时 候 能 运行 民 好 。 它 们 倾 辐 于 遵循 的 原则 钙 “ 如 采用 户 点 击 了 这 
个 按钮 ， 那么 系统 束 做 这 个 工作 ”。 


然而 ， 这 些 测试 方法 在 JavaScript 中 似乎 不 像 在 其 他 语言 中 那么 适 
用 。 在 JavaScript 中 ，QUnit 〈 参 见 本 章 的 "Qunit" 一 节 ) 更 加 适用 于 单 
元 测试 ， 而 Selenium (参见 本 章 的 "Selenium" 一 节 ) 则 更 适用 于 集成 测 
试 。 然 而 ， 由 于 JavaScript 中 趋向 于 使 用 很 多 小 的 匿名 函数 ， 所 以 造成 
很 难 运行 单元 测试 ， 因 为 这 些 函 数 很 难 被 测试 代码 调用 。 一 种 辅助 测 


试 的 方式 是 在 这 些 函 数 的 外 面 创建 很 多 功能 一 样 的 画 数 ， 可 以 把 它们 
放 在 更 大 的 命名 空间 里 面 ， 也 可 以 把 它们 作为 可 以 测试 到 的 函数 的 返 
回 值 。 


在 例 3-1 中 ，makeInList 用 于 测试 传 入 的 参数 list 中 是 否 包 含 记录 中 
的 某 个 字段 field。 这 种 情况 下 ， 返 回 的 函数 古 一 个 无 副作用 的 函数 ， 
很 容易 被 测试 。 例 3-2 展 示 了 测试 使 用 makeInList 返 回 的 函数 两 个 方 
法 。 如 采 传 入 的 是 "NY"， 男 数 将 返回 true， 因 为 创建 的 列表 中 含 
有 "NY"。 反 之 传 入 "CT" 束 会 运 回 false 。 


例 3-1: In-list 测 试 


var makeInList=fuction(list, field) 
return function inList(rec) 


var value=rec[field]; 
return list.indexOf (value) ! ==-1; 


i 
13-2: 使 用 In-list 测 试 


var nynj=makeInList(['NY', 'NJ'], 'state'); 
ok(nynj({state: "NY"})); 
ok(!nynj({state: "CT"})); 


JavaScript iS 17 Ay Be AY th ORR AR ° TEMA amie BA, ~A 
单元 测试 一 般 由 儿 个 连续 的 步骤 组 成 : 


1. 设 置 所 需 的 测试 套件 。 

2. 运 行 要 测试 的 方法 。 

3. 根 据 一 些 标准 测试 该 方法 的 结果 。 
测试 类 型 


测试 人 员 经 党 谈论 的 几 种 测试 包括 单元 测试 、 集 成 测试 等 。 这 些 
测试 的 基本 工具 是 一 样 的 ， 只 古 测 试 的 层次 不 一 样 。 


单元 测试 的 目的 是 测试 一 小 块 的 代码 ， 经 党 是 函数 或 者 方法 。 比 
如 ， 例 3-2 束 是 一 个 单元 测试 。 天 仅仅 测试 了 一 个 函数 ， 并 且 检查 了 这 
个 函数 所 有 可 能 运行 到 的 情况 。 


集成 测试 用 来 确保 整个 系统 按照 之 前 设计 的 方案 运行 。 集 成 测 斌 
可 以 是 在 浏览 器 中 点 击 一 个 按钮 ， 然 后 验证 数据 库 的 记录 是 否 被 更 
新 ， 从 而 验证 整个 系统 是 不 是 可 以 协同 工作 。 集 成 测试 一 般 运行 得 比 
单元 测试 慢 ， 所 以 ， 许 多 人 实时 运行 单元 测试 ， 在 晚上 才 进行 集成 测 
试 。 


验收 测试 用 户 确认 软件 是 不 是 满足 客户 的 需求 。 这 个 测试 的 主要 
目的 不 在 于 技术 上 ， 而 是 确保 软件 按照 程序 员 的 设计 工作 ， 因 为 这 样 
才能 满足 用 户 的 需求 ， 从 而 进行 部 署 。 


然而 ， 这 种 模型 不 适合 JavaScript。 在 这 种 模型 中 ， 行 为 可 以 不 是 
实时 的 ， 但 是 一 段 时 间 后 可 能 发 生 。 在 JavaScript 中 ， 这 样 的 测试 会 失 
败 ， 因 为 在 方法 运行 和 它 的 结果 准备 好 之 间 可 能 有 延迟 。 在 JavaScript 
中 ， 测 试 可 能 更 像 下 面 这 样 : 


1. 设 置 所 需 的 测试 套件 。 
2. 运 行 要 测试 的 方法 。 
3. 等 待 一 个 Ajax 调 用 完成 。 


4. 为 动作 的 结果 检查 DOM 《包括 页 面 以 外 部 分 的 不 良 影响 ) 。 


此 外 ， 还 有 一 个 障碍 ， 在 许多 情况 下 要 运行 的 方法 是 DOM 元 素 上 
的 一 个 回调 。 为 了 在 这 种 情况 下 运行 单元 测试 ， 需 要 找到 该 DOM 元 
素 ， 并 给 它 正确 的 事件 。 这 种 调用 处 理 程序 的 方式 与 实际 用 户 使 用 该 
应 用 时 的 方式 尽 可 能 相似 。 甚 至 还 不 够 : 它 不 能 通过 DOM 中 的 各 种 复 
杂 有 的 接口 再 现 用 户 的 点 击 体验 。 


基于 浏览 锅 的 应 用 程序 在 测试 用 户 界 面 时 也 比较 复杂 。 因 为 大 多 
数 的 测试 驱动 开发 都 是 在 服务 絮 端 完成 ， 或 者 是 测试 数据 处 理 的 代 
码 ， 这 些 测试 的 输入 输出 相对 比较 固定 。 对 于 给 定 的 函数 ， 输 
入 "A" 和 输入 "B" 返 回 值 都 是 确定 的 。 


但 是 JavaScript 程 序 由 于 更 加 关注 用 户 界面 而 变 得 更 加 复 江 ， 因 为 
可 能 的 用 户 输入 行为 序列 变 得 非常 庞大 。 所 以 需要 测试 的 数目 束 非 营 
大 ， 甚 至 开发 者 都 不 能 想到 所 有 的 情况 。 比 如 ， 如 采用 户 在 输入 框 输 
入 名 字 的 时 候 输 入 了 重音 符号 怎么 办 ? 这 时 候 系统 还 能 正 第 反馈 吗 ? 


QUnit 


QUnit 是 由 制作 jQuery 的 同一 个 团队 开发 的 JavaScript 测 斌 套件。 在 
QUnit 中 创建 一 个 测试 套件 ， 用 测试 套件 的 名 称 和 将 要 实际 运行 测试 的 
函数 两 个 参数 调用 测试 函数 。 


注意 : 也 可 以 配置 QUnit 来 检查 一 个 正在 运行 的 测试 是 否 引 入 任何 
狐 的 全 局 变量 ， 由 于 全 局 变量 是 JavaScript 错 误 的 主要 来 源 之 一 ， 因 此 
这 是 一 个 非常 有 用 的 功能 。 为 了 测试 全 局 变量 漏洞 ， 开 始 测试 时 问 
UREL 添 加 "?noglobals"。 


JSLint 的 使 用 ( 见 附录 : JSLint) 也 有 助 于 发 现 全 局 漏洞 和 很 多 其 
他 错误 。 可 以 在 一 组 JavaScript 文 件 上 运行 JSLint 作 为 目 动 测试 套件 的 


一 部 分 。 


以 一 个 非常 普通 的 Ajax 应 用 为 例 。 在 例 3-3 中 ， 有 一 个 市 有 一 个 按 
Rh hn eis 
将 一 个 Ajax 查 询 发 送 给 服务 器 ， 请 求 获 得 一 个 文件 (在 这 种 情况 下 ， 
它 是 一 个 静态 HTML 文 件 ) ， 然 后 将 该 文件 放 在 页 面 上 的 <div> 中 。 
请 注意 ， 为 简单 起 见 ， 把 JavaScript 直 接 放 在 文件 中 。 一 个 清理 器 将 
JavaScript 保 持 在 一 个 单独 的 随 测试 一 起 加 载 的 文件 中 。 


为 了 测试 这 一 点 ， 需 要 运行 该 按钮 的 回调 并 验证 结果 是 正确 的 。 
有 两 种 方法 可 以 做 到 这 一 点 。 测 试 程序 可 以 发 送 一 个 单 击 事件 给 按 
钮 ， 或 者 直接 调用 函数 。 对 于 QUnit 中 的 测试 ， 直 接 调用 函数 更 简单 ， 
但 要 求 把 画 数 绑 定 到 一 些 变量 上 ， 这 些 变量 可 以 通过 测试 工具 看 到 。 
本 例 中 已 经 这 样 做 了 ， 将 函数 赋值 给 变量 handleButtonClick。 调 用 回 
调 后 ， 测 试 函 数 进行 短暂 等 待 ， 让 Ajax 调用 运行 ， 然 后 用 jQuery 检查 


例 3-3: 简单 应 用 


<!DOCTYPE html> 

<html> 

<head> 

<script src="http://code.jquery.com/jquery-latest.js"></script 


<script src='button.js'> 


</script> 

<script> 

var handleButtonClick=function handleButtonClick(){ 
$().get('document.html', '', function(data, status){ 
$("<div 


>"),attr({id: 'target_div'}).text(data).appendTo('body'); 


}); 


$('button.click_me' ).click(handleButtonClick) ; 

</script> 

<link rel="stylesheet" 

href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" 

type="text/css" 

media="screen"/> 

<script 
src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"> 
</script> 

<script src='simple-test.js' ></script> 

</head> 

<body> 

<button id='click_me' >Click Me</button> 

<1--QUnit 要 求 的 内 容 - - > 

<hi id="qunit-header">QUnit example</h1> 

<h2 id="qunit-banner" > </h2> 

<h2 id="qunit-userAgent" > </h2> 

<ol id="qunit-tests"></ol> 

<div id="qunit-fixture">test markup,will be hidden</div> 

</body > 

</html> 


QUnit 测 试 工 具 被 页 面 加 载 到 加 载 器 上 ， 像 其 他 要 加 载 的 
JavaScript 程 序 一 样 。 本 例 从 
http://github.com/jquery/qunit/raw/master/qgunit/qunit.js 加 载 。 该 文件 将 开 
始 运 行 加 载 器 上 的 任何 jQuery 测试 。 一 旦 测试 运行 完毕 后 ， 这 些 测试 
结果 将 显示 在 页 面 上 ， 这 是 QUnit 为 何 需要 DOM 中 存在 这 些 元 素 的 原 
因 o 


为 了 测试 这 个 例子 ， 在 例 3-3 中 测试 工具 将 加 载 QUnit， 然 后 调用 
handleButtonClick 方 法 。 例 3-4 通 过 传递 值 1000 给 setTimeout 方 法 ， 等 竺 
一 秒 钟 直到 文件 被 加 载 。 一 秒 之 后 ， 测 试 <div> 在 DOM 中 是 否 存 在 


(第 一 次 调用 equal) ， 从 div 得 到 文本 ， 并 检查 文本 中 的 第 一 个 单词 是 
否 为 "First"， 这 是 预期 值 (第 二 次 调用 equal) 。 可 以 选择 一 个 更 完整 
的 测试 ， 每 四 分 之 一 秒 检查 一 次 该 元 素 ， 直 到 它 出 现 或 到 达 最 大 时 间 
限制 。 在 现实 世界 中 网 页 加 载 时 间 可 能 有 所 不 同 ， 这 取决 于 外 部 因 
素 ， 包 括 网 络 的 使 用 和 服务 絮 人 负载 。QUnit 测 试 是 一 个 由 测试 工具 调用 
的 JavaScript 芳 数 。 请 看 例 3-4 中 的 简单 测试 。 测 试 使 用 多 个 要 通过 测试 
必须 满足 的 断言 函 数 。 为 了 测试 一 个 值 是 否 等 于 预期 的 结果 ， 可 使 用 
equal0) 方 法 ， 它 有 三 种 方式 ， 测 试 值 、 预 期 的 结果 和 参数 选项 ， 这 是 
一 个 消 恩 ， 用 于 显示 测试 是 否 失败 。 使 用 此 消 居 将 有 助 于 弄 清 楚 测 试 
失败 的 对 象 。 如 果 在 代码 写 完 6 个 月 后 才 测 试 代码 ， 则 更 为 有 用 。 


例 3-4: 人 简单 测试 


test("Basic Test", function(){ 
// 判 断 目标 属性 不 存在 
equal($('div#target_div').length, ©, 
"Target element should not exist"); 

// 运 行 方法 

handleButtonClick(); 
equal($('div#target_div').length, ©, 
"Target element should still not exist"); 
window. setTimeout(function(){ 

start(); 
equal($('div#target_div').length, 1, 
"Target element should now exist"); 
equal("First", 
$('div#target_div').text().substr(0, 5), 
"Check that the first word is correct"); 
}, 1000); 

stop(); 

}); 


用 QUnit 测 试 


要 运行 的 QUnit 测 试 必须 包含 QUnit 样 式 表 和 JavaScript 文 件 ， 这 些 
可 以 直接 从 Github 拖 入 或 从 本 地 加 载 ( 见 例 3-3) 。DOM 还 必须 包括 几 
个 元 素 ， 让 QUnit 使 用 以 显示 其 结果 。 在 例 3-3 中 的 HTML 下 方 可 以 看 
到 。 这 是 运行 测试 需要 的 所 有 条 件 。 


QUnit 提 供 了 八 个 断言 画 数 。 除 了 equal0 函 数 〈 它 出 现在 我 们 前 面 
的 例子 中 ) 外 ， 还 有 对 等 式 和 ok() 方 法 的 进一步 测试 ， 该 方法 测试 传 
递 给 它 的 值 是 否 为 真 。 还 有 根据 JavaScript“===” 操 作 符 的 strictEqual() 
测试 ， 而 equal0 使 用 “==” 操 作 进 行 比较 。 


为 了 测试 一 个 更 复杂 的 数据 结构 是 否 是 相同 的 ， 使 用 
deepEqual0。 它 对 两 个 数据 结构 作 递归 比较 。 


每 个 等 式 函 数 都 有 一 个 相反 的 形式 ， 可 以 测试 等 式 的 缺陷 : 
notEqual()、notStrictEqual() 和 notDeapEqual()。equal 的 各 版 本 都 用 相同 
的 参数 ， 但 测试 相反 的 情况 。 


最 后 的 判断 是 raises0， 以 一 个 函数 为 参数 ， 并 期 望 抛 出 错误 情 
Vy 


要 测试 异步 方式 发 生 事件 ， 使 用 返回 值 无 法 正常 工作 。 在 这 种 情 
况 下 ， 测 试 必须 等 竺 动作 完成 。 可 以 通过 用 setTimeoutO 设 置 一 个 超时 
来 实现 ， 当 设 定 的 时 间 到 达 后 再 运行 。 或 者 可 以 用 回调 如 Ajax 加 载 或 
其 他 事件 来 实现 。 


Selenium 


虽然 QUnit 允 许 测试 JavaScript 代 码 ， 但 是 Selenium 
(http://seleniumhq.org/) 采用 了 不 同 的 方法 。Selenium 通 过 模拟 用 户 
可 能 会 采取 的 行为 测试 用 户 界 面 。 一 个 Selenium 测 试 包括 一 些 浏览 器 
中 的 运行 步骤 ， 例 如 加 载 一 个 页 面 、 点 击 一 个 特定 的 元 素 、 输 入 文字 
到 一 个 文本 区 等 。 这 些 行为 夹杂 着 判断 ， 验 证 要 测试 的 DOM 状 态 或 其 
他 东西 。 其 中 可 能 包括 对 元 素 或 文本 是 否 存在 的 测试 。 


当 Selenium 测 试 运行 时 ， 实 际 上 将 局 动 一 个 浏览 套 ， 并 用 或 多 或 
少 与 用 户 操作 相同 的 方式 运行 它 。 因 此 可 以 通过 浏览 磊 监 视 该 测试 的 
交互 。 其 至 可 以 在 测试 运行 的 同时 手动 与 浏览 器 交互 《虽然 这 可 能 不 
是 一 个 好 主意 ) 。 


Selenium 由 几 个 大 多 独立 的 部 分 组 成 。 其 一 是 作为 Firefox 浏 览 器 
插件 实现 的 IDE。 男 一 个 是 Selenium RC 服务 器 seleniumrc， 它 是 一 个 可 
用 于 在 不 同 的 浏览 絮 上 自动 运行 测试 的 Java 服 务 器 


Firefox 的 Selenium IDE 搬 件 是 开发 人 员 最 好 的 朋友 。 它 允许 构建 
直接 在 浏览 器 中 运行 的 测试 。IDE 可 以 记录 用 户 的 操作 ， 并 稍 后 作为 
一 个 测试 回放 。 它 还 可 以 让 你 按 步调 试 一 个 测试 〈 每 次 一 行 ) ， 这 对 
在 测试 中 发 现时 序 问题 非常 有 用 。 


TER: 在 默认 情况 下 ， 录 制 动 作 时 Selenium IDE 将 使 用 各 种 HTML 
元 素 的 ID。 在 程序 员 没 有 明确 分 配 ID 的 情况 下 ， 一 些 框架 将 会 在 元 素 
创建 时 顺序 地 分 配 ID。 这 些 ID 每 次 运行 都 不 相同 ， 所 以 请 使 用 一 些 其 
他 的 方法 标识 感 兴趣 的 元 素 。 


Selenium IDE 将 测试 输出 为 HTML 文 件 ， 可 以 在 Firefox 的 IDE 自 身 
中 运行 。 此 外 ， 这 些 HTML 文 件 可 以 作为 批 处 理 任务 在 Selenium RC 组 
件 中 运行 。Selenium RC 服务 器 也 允许 对 运行 于 任意 浏览 器 上 的 HTML 
进行 测试 ， 因 此 可 以 在 正 、Chrome、Opera 或 Safari 上 运行 这 些 测 试 。 
Selenium RC 服务 絮 也 可 以 由 传统 测试 通过 像 phpUnit 或 jUnit 一 样 运行 
的 测试 进行 控制 。 


Selenium IDE 在 开发 中 记录 Web 宏 方面 也 很 有 用 。 例 如 ， 如 果 正 在 
测试 Web 应 用 中 的 一 个 向 导 ， 在 要 调试 的 界面 之 前 会 显示 四 个 或 五 个 
界面 ， 可 以 使 用 IDE 来 创建 Selenium 肢 本， 然后 把 它 作 为 一 个 宏 调 用 ， 
从 而 可 以 自动 地 找到 正在 测试 的 点 。 


注意 ;如 果 一 个 测试 在 单 步 模式 下 运行 时 起 作用 ， 但 工作 不 正 
常 ， 它 可 能 需要 儿 个 暂 集 语句 让 浏览 絮 赶 上 来 ， 或 者 一 些 waitFor.…… 
语句 更 好 ， 这 将 使 测试 和 浏 贤 右 同步 。 


Selenium 中 有 三 种 方式 来 运行 测试 ， 通 过 Selenium IDE、 用 
Selenium RC 的 测试 工具 以 及 用 一 种 编程 语言 。IDE 在 交互 环境 中 容易 


使 用 ， 但 只 在 Firefox 中 有 用 。 测 试 工具 接受 HTML 格 式 的 输入 测试 ， 
它 可 以 在 IDE 中 创建 。 最 后 ， 可 以 在 一 个 单元 测试 框架 中 如 phpUnit， 
用 编程 语言 编写 测试 。 使 用 基于 测试 工具 或 编程 语言 的 测试 套件 允许 
对 浏览 絮 进 行 全 套 测 试 ， 并 能 提供 报告 和 其 他 功能 。 这 个 过 程 也 可 以 
整合 到 持续 集成 工具 ， 以 及 用 xUnit 框 架 编写 的 任何 其 他 测试 中 。 


一 个 Selenium 测 试 由 一 个 包含 一 个 表 的 HTML 文件 构建 而 成 ， 测 
试 中 的 每 一 步 是 表 中 的 一 行 。 该 行 包括 三 列 : 要 运行 的 命令 、 要 操作 
的 元 素 和 在 某 些 情况 下 使 用 的 参数 选项 。 例 如 ， 第 三 列 包含 测试 表单 
时 要 输入 到 一 个 input 元 素 中 的 文本 。 


与 QUnit 测 试 不 同 ，Selenium 测 试 都 是 关于 用 户 界 面 的 测试 。 
此 ，Selenium 是 比 单 元 测试 更 集成 的 测试 。 为 了 用 Selenium 测 试 例 3- 
3， 需 要 与 QUnit 不 同 的 方法 。QUnit 测 试 直接 调用 处 理 函 数 ， 而 
Selenium 测 试点 击 按钮 ， 并 等 待 <div> 显示 。 


例 3-5 完 成 该 测试 。 表 中 的 每 一 行 作为 测试 的 一 部 分 执行 一 个 操 
作 。 第 一 行 打开 的 网 页 进行 测试 ， 然 后 第 二 行 单 击 按钮 《通过 元 素 的 
ID 识别 ) 。 然 后 ， 测 试 等 待 页 面 显 示 <div> ， 在 这 种 情况 下 ， 通 过 


XPath 进行 识别 。 


此 测试 对 上 面 QUnit 测 试 的 同一 个 简单 脚本 进行 测试 。 但 不 古 测试 
玉 数 本 映 ， 而 是 用 与 人 工 测试 员 类 似 的 方法 测试 用 户 界 面 。 它 打开 页 


面 ， 单 击 click_me 按 钮 。 然 后 等 待 div 元 素 target_div 在 DOM 中 出 现 。 然 
后 ， 它 宣布 单词 "First" 出 现在 该 页 面 中 。 


例 3-5: 简单 Selenium 测 试 


<?xml version="1.0"encoding="UTF-8"?> 

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" 

"http: //www.w3.org/TR/xhtm11/DTD/xhtmli-strict.dtd" > 

<html xml: Lang="en"lang="en" > 

<head profile="http://selenium-ide.openga.org/profiles/test - 
case" > 

<meta http-equiv="Content-Type"content="text/html; charset=UTF - 
B8"/> 

<link rel="selenium.base"href="http://www.example.com/"/> 

<title>New Test</title> 

</head> 

<body> 

<table cellpadding="1"cellspacing="1"border="1" > 

<thead > 

<tr><td rowspan="1"colspan="3">New Test</td> </tr> 

</thead> <tbody> 

<tr> 

<td>open</td> 

<td>/examples/simple.html</td> 

<td></td> 

</tr> 

<tr> 

<td>click</td> 

<td>click_me</td> 

<td></td> 

</tr> 

<tr> 

<td>waitForElementPresent </td> 

<td>//div[@id='target_div']</td> 

<td></td> 

</tr> 

<tr> 

<td>assertTextPresent</td> 

<td>First</td> 

<td> </td> 

</tr> 

<!--More tests--> 

</tbody> </table> 


</body > 
</html> 


Selenium 命 令 
Selenium 拥 有 丰富 的 命令 语言 
(http://seleniumhg.org/docs/04_selenese_commands.htm) ， 人 允许 程序 员 
创建 测试 。 用 户 在 浏览 器 中 进行 的 几乎 任何 动作 都 可 以 用 Selenium 命 
令 实现 。 可 以 通过 创建 一 个 包含 一 系列 动作 和 测试 的 脚本 来 创建 


Selenium 测 试 。 


Selenese 


警告 从 桌面 拖 动 一 个 文件 到 浏览 器 CLR OAH”) ， 不 能 
用 Selenium 实 现 ， 也 不 能 人 简单 地 用 gqUnit 测 试 。 


有 极 少数 例外 ，Selenium 命 令 将 DOM 中 的 要 操作 的 元 素 的 位 置 作 
为 一 个 参数 。 该 位 置 可 以 在 几 种 方法 中 的 一 个 进行 指定 ， 包 括 元 素 
ID、 元 素 的 名 称 、XPATH、CSS 类 、DOM 内 部 的 JavaScript 调 用 和 链接 
文本 。 第 3 章 的 “Selenium 位 置 选项 ?对 这 些 选 项 进行 了 说 明 。 


警告 : 在 ExUS 中 使 用 元 素 ID 没 有 效果 ， 因 为 ExUS 每 次 分 配给 元 
素 的 ID 会 有 变化 。 请 使 用 CSS 类 或 者 HTML 元 素 的 其 他 属性 。 为 表示 
按钮 ， 使 用 XPath 中 按钮 的 文本 ， 像 /button[text()='Save] 通 常 很 有 用 ， 
也 可 以 选择 使 用 属性 如 : //img[@src='img.pne'] ° 


注意 : Selenium 基 本 命令 不 包括 任何 条 件 或 循环 的 能 力 。 一 个 
Selenium HTML 文 件 顺序 地 从 上 到 下 运行 ， 当 断言 失败 或 最 后 一 个 命 
令 执行 时 结束 。 如 有 果 需 要 流程 控制 ， 请 使 用 goto_sel_ide.js 插 件 
(http://51elliot.blogspot.com.2008/02/selenium-ide-goto.html) ° 


这 个 插件 对 查找 内 存 泄漏 或 其 他 问题 很 有 用 ， 这 些 问 题 可 能 会 出 
现在 用 户 长 时 间 运 行 的 应 用 程序 中 。 要 摊 脱 内 存 泄漏 ，JavaScript 仍 然 


有 很 长 的 路 要 走 ， 当 页 面 重 载 频繁 ，JavaScript 和 和 DOM 状态 重 置 时 内 存 
洪 露 不 是 一 个 问题 。 


Selenium 中 大 量 的 命令 可 以 用 来 构建 测试 。Selenium IDE 包 含 一 个 
.此 其 


命令 的 参考 ， 一 旦 学 会 一 些 基本 知识 ， 就 可 以 很 容易 地 对 于 任何 给 定 
的 情况 找 出 正确 的 命令 。 表 3-1 显 示 了 一 些 常 见 的 Selenium 命 令 。 它 们 


往往 在 两 个 基本 组 中 : 动作 和 断言 。 动 作 包 括 click、type、dblclick、 
keydown、keyup 等 。 上 断言 提供 实际 测试 ， 能 让 Selenium 找 出 用 户 的 行 
为 如 何 影响 页 面 。 断 言 可 以 暂停 脚本 ， 但 不 会 产生 页 面 变 化 。 


表 3-1: 选 定 的 Selenium 命 令 


命令 目 标 动作 

open 要 打开 的 Web 页 面 打开 一 个 Web 页 面 
dblclick 要 双击 的 对 象 双击 一 个 元 素 

click 要 单 击 的 元 素 单 击 一 个 元 素 
mouseOver 鼠标 移动 处 的 元 素 复制 一 个 mouseOver 事 付 
mouseUp 鼠标 按键 弹 起 处 的 元 素 复制 一 个 mouseUp 事 侍 
mouseDown 鼠标 按键 按 下 处 的 元 素 复制 一 个 mouseDown 事 伯 
type 用 XPath 或 其 他 选择 器 选择 的 元 素 ， ”模拟 文字 输入 


第 三 列 是 要 输入 的 文本 


R 3-1: 选 定 的 Selenium 命 令 (i) 


命令 目标 动作 

windowMaximized 最 大 化 当前 窗口 

refresh 出 新 训 览 器 。 可 以 于 重 器 
JavaScript 状 态 

dragAndDrop 到 拖 动 元 素 的 偏 移 ， 选 择 器 是 要 拖 忠 一 个 元 素 


拖 动 的 元 素 。 


Selenium 位 置 选 项 


Selenium 提 供 了 6 种 定位 网 页 元 素 的 方式 。 选 择 正确 的 定位 方式 会 
人 简化 开发 测试 代码 的 复 洒 度 : 


ID 
提供 一 个 HTML ID: 

id 

Name 

提供 一 个 元 素 名 (可 用 于 表单 输入 ) : 


name=username 


XPath 


用 XPath 找到 一 个 元 素 : 


//form[@id='loginForm' ]/input[1] 


CSS 


通过 CSS Selector 找 到 一 个 元 素 ， 用 户 比 较 熟 悉 的 过 程 是 
jQuery,Selenium 中 的 CSS Selector 引 警 比 jQuery 的 更 有 限 : 


css=div.x-btn-text 


Document 
用 DOM 找 到 一 个 元 素 : 


dom=document .getElementById('loginForm' ) 


Link text 


通过 href 属 性 中 的 文本 找到 元 素 (可 用 于 HTML 链 接 ) 


link='Continue' 


注意 : 在 ExUS 或 任何 其 他 目 定义 的 部 件 中 ， 如 有 果 一 个 click 事件 按 
预期 工作 ， 尝 试 使 用 mouseDown。 例 如 ， 要 在 表格 中 选择 一 行 ， 用 
mouseDown 事 件 ， 而 不 是 click 事 件 。 当 用 鼠标 单 击 时 ， 浏 览 锅 发 送 三 
个 事件 : mouseDown、mouseUp 和 click 事 件 。 用 户 界 面 中 的 不 同 元 素 
可 能 啊 应 其 中 任何 一 个 。 


Selenium 中 的 动作 都 有 两 种 形式 : 一 种 简单 形式 和 一 种 将 等 待 页 
面 重 狐 加 载 的 形式 。 点 击 命令 的 等 待 形式， 例如 clickAndWait 。 


经 过 一 系列 动作 ， 有 必要 验证 该 应 用 实际 上 执行 了 正确 的 动作 。 
Selenium 中 的 测试 大 多 数 对 元 素 存 在 与 否 进行 测试 。 例 如 ， 测 试问 一 
个 ExtJS 表 格 中 添加 一 个 新 元 素 ， 测 试 脚本 会 做 这 样 的 事情 : 


LAENI ZEH ° 


2. 填 写 表格 ， 提 供 默 认 值 。 


3. 问 服务 器 提交 新 的 记录 。 


4. 等 待 


.等 待 服务 器 的 响应 ， 并 验证 该 文本 在 正确 的 表格 中 。 


所 有 的 断言 有 三 种 基本 形式 ， 基 本 形式 、 校 验 形式 和 WaitFor 形 
式 。 基 本 的 命令 类 似 于 assertElementPresent， 并 且 当 断言 失败 时 将 停 
止 测试 。verifyElementPresent 将 检查 元 素 是 否 存在 ， 如 果 不 存在 则 继 
续 测 试 。 如 果 有 多 个 测试 ， 又 不 希望 它们 在 一 次 失败 后 停止 ， 这 将 非 
常 有 用 。 如 果 一 个 动作 应 该 有 一 个 延迟 的 结果 ， 则 用 


waitForFElementPresent， 这 将 暂停 测试 脚本 ， 直 到 条 件 满足 或 到 达 测 试 
时 间 。 小结: 


assert... 


verify. 
检查 某 事 是 否 为 真 
waitFor.. 


“， 如 采 不 为 真 则 停止 


， 如 果 不 为 真 则 继续 。 


等 待 页 面 上 的 某 事 发 生 (往往 用 Ajax) 。 


用 Selenium IDE 构 建 测试 


Selenium 测 试 可 以 手工 构建 ， 但 目 动 往往 更 容易 。Selenium IDE 的 
Firefox 插 件 可 以 在 浏览 器 中 记录 动作 ， 并 把 它们 保存 为 测试 。 程 序 员 
仍然 必须 加 入 断言 、 手 动 等 得 命令 ， 并 可 能 要 调整 已 产生 的 脚本 。 测 
斌 被 保存 为 一 个 HTML 文 档 ， 可 以 在 版 本 控制 内 部 进行 检查 并 从 IDE 和 
自动 测试 工具 中 运行 。 


IDE 是 一 个 在 Selenium 中 测试 选项 的 不 错 方式 。 它 也 可 以 创建 测试 
脚本 并 直接 从 IDE 中 运行 它们 。Selenium IDE 还 允许 控制 执行 脚本 的 快 
慢 程度 ， 并 通过 它们 进行 单 步调 试 。 左 侧面 板 〈 在 图 3-1 被 隐藏 了 ) 显 
示 了 一 个 所 有 已 定义 测试 用 例 的 列表 。 它 们 都 可 以 通过 工具 栏 上 的 第 
一 个 按钮 运行 (速度 控制 的 左 侧 ) 。 右 边 的 下 一 个 按钮 执行 一 个 测 
Re 
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3-1 Selenium IDE 


Selenium IDE 撒 部 的 面板 是 功 
。 最 左边 的 选项 卡 功能 是 正在 运 1 


) 
á 
先 定 命 


J 了 测试 的 日 志 


面板 。 当 从 中 间 面 板 的 “菜单 ” 远 择 一 个 命令 


命令 的 信息 ， 包 括 需要 什么 样 的 


参 


a 


BY o 


能 选项 卡 (可 以 用 插件 添加 更 


志 。 第 二 个 选项 卡 是 
时 ， 此 选项 卡 将 显示 


自动 运行 测试 


可 以 用 一 个 流行 的 测试 套件 (JUnit 或 PHPUnit) 来 运行 Selenium 
测试 ， 让 测试 跨 多 个 浏览 器 和 平台 运行 。 如 果 正 在 定期 运行 一 个 单元 
测试 ，Selenium 测 试 可 以 从 正常 测试 中 〈 见 例 3-6) 运行 。 


注意 : 大 部 分 或 全 部 修改 这 里 描述 的 PHPUnit 后 ， 它 在 所 有 其 他 
语言 类 似 的 测试 套件 中 可 用 。 


这 些 测试 将 像 任何 其 他 的 测试 一 样 在 测试 环境 运行 。 每 个 HTML 
文件 将 作为 测试 在 测试 套件 中 运行 (细节 可 能 取决 于 所 使 用 的 测试 工 
具 ) 。 测 试 工具 将 顺序 地 以 与 IDE 中 类 似 的 方式 运行 每 个 HTML 文 件 。 


要 在 PHPUnit 中 运行 测试 ， 需 要 设计 一 个 或 多 个 测试 机 来 运行 浏 
完 器 。 每 个 测试 机 需要 运行 一 个 Selenium RC 的 程序 副本 ， 并 安装 有 浏 
哆 絮 。seleniumrc 的 二 进 制 文件 是 一 个 ".jar" 的 java 文 件 ， 因 此 能 够 在 
Windows、Linux 或 Mac 探 作 系统 上 运行 。 


当 在 PHPUnit 中 运行 测试 时 ， 测 试 类 
PHPUnit Extensions_SeleniumTestCase 将 联系 seleniumrc 程 序 ， 并 要 求 
它 局 动 一 个 浏览 右 实 例 ， 然 后 在 一 个 REST 接 口上 发 送 命令 给 它 。 


如 果 在 "$browsers" 的 静态 成 员 中 或 通过 "phpunit.xml" 文 件 ( 见 例 3- 
7) 列 出 了 多 个 浏览 器 ，"PHPUnit_Extensions_SeleniumTestCase" 类 将 
顺序 地 运行 ， 为 每 个 浏览 器 测试 运行 每 个 测试 。 例 如 ， 在 例 3-6 中 ， 将 
在 Safari、Firefox、Chrome 和 和 Internet Explorer 上 运行 测试 。 在 
phpunit.xml 文 件 中 列 出 浏览 器 选项 更 好 ， 因 为 可 以 创建 多 个 文件 ， 以 
帮助 实现 不 改变 测试 源 代码 即 可 修改 测试 选项 


下 面 的 测试 从 文件 seleneseTest.html 运 行 一 个 Selenium 测 试 。 但 
是 ， 通 过 设置 测试 类 的 $seleneseDirectory 属 性 为 该 文件 的 路 径 ， 可 以 
让 它 自动 运行 Selenium HTMIL 测 试 文件 的 整个 路 径 。 


public static$seleneseDirectory='/path/to/files'; 


例 3-6: phpUnit 中 运行 Selenium 


<?php 
require_once'PHPUnit/Extensions/SeleniumTestCase.php'; 
class WebTest extends PHPUnit_Extensions_SeleniumTestCase 


protected$captureScreenshotOnFailure=TRUE; 
protected$screenshotPath='/var/www/localhost/htdocs/screenshots' 


protected$screenshotUrl='http://localhost/screenshots'; 
public static$browsers=array( 
array( 

‘name'=>'Safari on MacOS X', 
'browser'=>'*safari', 
"host'=>'mac.testbox', 
"port'=>4444, 
"timeout '=> 30000 

) ， 

array( 

'name'=>'Firefox on Windows', 


'browser'=>'*firefox', 

"host'=> 'windows.testbox', 

'port'=>4444, 

"timeout '=> 30000 

) 

array( 

"name'=>'Chrome on Windows XP', 

"browser '=>'*googlechrome' , 

"host'=> 'windows.testbox', 

'port'=> 4444, 

'timeout '=> 30000 

) ， 

array( 

"name'=>'Internet Explorer on Windows XP', 
"browser'=>'*iexplore', 

"host'=> 'windows.testbox', 

'port'=> 4444, 

'timeout '=> 30000 

) 

); 
protected function setUp() 


{ 


$this- >setBrowserUrl( 'http://www.example.com/' ); 


public function testSeleniumFile( ) 

{ 
$this->open('http://www.example.com/' ); 
$this->runSelenese('seleneseTest.html1' ); 


} 
} 


?> 


例 3-7: phpunit.xml 


<phpunit stopOnFailure="true" 
verbose="true" 
strict="true"> 

<php> 

</php > 

<selenium> 

<browser name="Firefox" 
browser="*firefox" 
host="192.168.0.10" 
port="4444" 
timeout="30000"/ > 


<browser name="Chrome" 
browser="*chrome" 
host="192.168.0.10" 
port="4444" 
timeout="30000"/ > 

<1-- 其 他 浏览 器 - - > 
</selenium> 

<testsuites> 

<testsuite name="Selenium"> 
<file>/path/to/MyTest.php</file> 
</testsuite> 

</testsuites> 

</phpunit > 


相对 于 Selenium RC 的 所 有 优势 ， 它 有 一 个 主要 的 缺点 : 每 次 只 能 
运行 一 个 测试 。 因 此 ， 如 果 用 一 个 大 的 测试 套件 和 大 量 不 同 的 浏览 器 
运行 该 测试 ， 完 整 的 测试 运行 可 能 花费 好 儿 个 小 时 。Selenium Grid 为 
此 提供 了 解决 方案 ， 允 许 在 一 组 机 器 上 并 行 运行 大 量 测试 。 可 以 在 
http://selenium-grid.seleniumhq.org/ 找 到 Selenium Grid 软件 的 例子 和 文 
档 。 


如 果 不 想 建立 测试 场 ， 网 上 有 "cloud selenium farms" 可 用 。 此 外 ， 
可 以 在 亚马逊 的 EC2 云 服务 中 运行 Selenium“。 对 于 偶尔 使 用 的 用 户 或 
没有 资源 用 于 建立 和 维护 一 个 本 地 selenium 测 试 场 的 初学 者 ， 这 是 非 
常 有 用 的 。 对 于 查看 应 用 将 如 何在 远程 网 络 中 执行 也 非常 有 帮助 。 


Selenese 命 令 编程 接口 


Selenium 测 试 套件 可 以 从 一 个 HTML 文件 或 直接 从 单元 测试 代码 
中 运行 一 个 测试 。Selenium RC 服务 侣 也 有 一 个 API 可 以 在 几 种 语言 
通过 单元 测试 代码 进行 调用 ， 可 以 写 一 个 PHP、Ruby ` Python ` 
PERL、JAVA 及 C#/.NET 的 Selenium 测 试 。 可 以 通过 Selenium IDE 或 手 
动 创建 代码 的 测试 用 例 。Selenium IDE 将 生成 一 个 测试 框架 。 要 做 到 
这 一 点 ， 在 IDE 中 记录 测试 ， 然 后 为 运行 测试 的 语言 选择 输出 选项 ， 
则 测试 将 转换 成 该 语言 。 


注意 : 要 在 多 个 浏览 器 上 运行 Selenium， 需 要 设置 Selenium 服 务 


器 。 见 第 3 章 的 “Selenium RC 及 一 个 测试 场 ”。 


直接 从 单元 测试 运行 Selenium， 和 宿主 语言 作为 语言 拥有 全 部 力 
量 ， 尤 其 是 它 的 流程 控制 ， 而 HTML 样 式 测试 则 有 限 得 多 。 通 过 在 服 
务 器 端 编程 语言 使 用 的 API， 使 得 为 编写 Web 肢 本 创建 一 个 非常 丰富 的 
环境 成 为 可 能 ， 当 然 ， 必 须 访问 服务 右 问 的 库 检 查 数 据 库 中 的 数据 或 
者 访问 Web 服 务 ， 可 以 构建 一 个 测试 ， 在 浏 哎 絮 中 执行 一 些 动作 ， 然 
后 在 数据 库 或 日 志文 件 中 对 结果 进行 检查 。 


使 用 服务 器 端 测 试 的 另 一 个 好 处 是 ， 如 宁 正 在 使 用 任何 形式 的 持 
续 整 合 如 CruiseControl 或 phpUnderControl,Selenium 测 斌 就 像 一 个 测试 


系统 ， 只 是 可 以 做 更 多 测试 ， 而 且 不 论 团队 正在 使 用 的 是 什么 语言 都 
能 测试 。 在 一 个 使 用 了 测试 框架 的 团队 中 ， 这 将 充分 利用 团队 的 现 有 


经 验 。 


例 3-8 是 用 PHP 在 PHPUnit 测 试 框 染 下 写 的 一 个 很 简单 的 Selenium 
测试 的 例子 。 它 首先 打开 一 个 页 面 ， 等 待 页 面 载 入 完毕 后 ， 判 断 页 面 
标题 是 不 是 "Hello World"， 然 后 它 会 点 击 "Click Me" 按 钮 。 如 果 标 题 不 
是 "Hello World" 或 者 没有 "Click Me" 按 钮 ， 测 试 就 会 返回 失败 。 


例 3-8: 测试 Hello World 


<?php 
require_once 'PHPUnit/Extensions/SeleniumTestCase.php' 
class WebTest extends PHPUnit Extensions SeleniumTestCase 


functiontestTitle() 
{ 


$this->open('http://www.example.com' ); 
$this->assertTitle('Hello World'); 
$this- >click("//button[text()='Click Me']"); 


} 
} 


Selenese 命 令 一 般 包 括 动作 、 断 言 和 查询 。 动 作 通常 反映 Selenium 
动作 的 基本 形式 : click ` mouseOver ` mouseDown 、type 等 。 各 种 出 现 
在 Selenium IDE 中 的 延迟 形式 是 不 存在 的 ， 但 可 以 很 容易 地 通过 使 用 
sleep 芳 数 的 循环 进行 模拟 。 


许多 在 HIML Selenese 测 试 工具 中 出 现 的 实用 方法 在 服务 右 端 
Selenese 接 口中 并 不 存在 ， 不 包括 WaitForElementPresent 〈 见 例 3-9) 或 
WaitForElementNotPresent 方 法 在 内 ， 但 可 以 很 容易 地 通过 为 测试 创建 
目 定 义 基 类 进行 添加 。 


例 3-9: WaitForElementPresent 


function waitForElementPresent($el, $timeout=60) 
{ 

While($timeout ) 

{ 

if ($this- >isElementPresent($el) ) 

return true; 

} 

$timeout -=1; 


sleep(1); 


} 
$this->fail("Element$el not found"); 
} 


查询 允许 程序 员 确 定 行动 发 生 后 页 面 的 状态 。 这 些 查询 允许 程序 
员 找 出 页 面 上 是 否 存 在 一 个 元 素 或 一 段 文字 ， 或 了 解 页 面 的 当前 状 


& 
C 
I 


Selenese API 还 提供 了 许多 方法 ， 从 一 个 单元 测试 环境 中 的 HTML 
文档 中 获取 数据 。 为 了 测试 页 面 中 是 否 存在 一 个 给 定 文本 ， 请 使 
用 "$this->>isTextPresent()" 方 法 ， 这 对 检查 一 个 文本 是 否 存 在 往往 非常 
有 用 。 要 找 出 一 个 元 素 是 否 存在 ， 请 使 用 $this- >>isElementPresent() 方 
法 。 要 真正 从 DOM 中 获取 文本 ， 请 使 用 $this- > getText() 方 法 。 它 对 


Selenese 文 持 的 任何 形式 的 选择 占 进 行 处 理 ， 并 返回 该 元 到 的 文本 。 如 
果 该 元 素 不 存在 ， 该 方法 将 抛 出 一 个 异常 。 


XPath 选择 恬 匹 配 页 面 上 的 多 个 元 素 。 它 通常 会 返回 匹配 的 第 一 个 
元 素 。 要 知道 有 多 少 个 元 率 匹 配 ， 请 使 用 $this- > getX pathCount()77 
ie 


= ZEPHP PEAY, ONT ae Pe SBT EPP + AYO 
试 本 身 之 间 的 测试 动作 进行 同步 可 能 是 一 个 挑战 。 这 很 直观 ， 写 一 个 
进行 了 某 些 操作 的 测试 ， 例 如 单 击 一 个 元 素 ， 然 后 立即 移动 鼠标 到 男 
一 个 元 素 上 。 这 不 可 避免 地 会 失败 ， 因 为 JavaScript 将 需要 人 花费 一 段 时 
间 (也 许 是 0.1s) ， 以 创建 一 个 用 户 界 面 或 等 待 数据 从 服务 器 加 载 。 
有 两 种 方式 来 处 理 这 个 问题 。 


简单 的 方法 是 在 PHP 代 码 中 加 入 延 时 。 一 些 放 在 正确 位 置 的 
sleep(0) 命 令 ， 可 以 正常 地 测试 函数 。 然 而 ， 可 能 会 导致 必须 花费 较 长 
的 时 间 运 行 测试 。 为 了 加 快 测试 ， 使 用 如 waitForElementPresent() 这 样 
的 方法 在 测试 之 间 延 时 1/10s， 可 以 让 脚本 运行 速度 更 快 ， 只 要 DOM 中 
有 一 种 方法 能 判断 浏览 器 为 下 一 步 测 试 做 好 准备 。 


第 二 种 方式 是 在 Selenese 接 口中 使 用 $this- > getEval() 方 法 评估 目 害 
义 JavaScript。 回 该 方法 传递 一 个 字符 串 ， 其 中 包含 要 执行 的 
JavaScript。 当 通过 getEval() 调 用 JavaScript 时 ， 它 将 运行 在 测试 工具 窗 


口 的 窗口 背景 下 ， 而 不 古 测 试 窗口 中 。 因 此 ， 全 局 变量 必须 以 全 局 窗 
口 对 象 为 前 级 《通常 不 要 求 ) 。 


在 例 3-10 中 ，Selenium 在 JavaScript 中 执行 getEval() 获 取 全 局 变量 
session_id ° 
例 3-10: 用 Selenese 运 行 JavaScript 


$session_id=$this- >getEval( 'window.session_id'): 


注意 : 也 可 以 使 用 Selenium RC 设 置 手 动 测试 ， 通 过 让 脚本 打开 该 
页 面 ， 并 执行 所 有 步骤 ， 直 到 到 达 需 要 测试 的 点 。 当 到 达 终 点 时 ， 写 
应 该 长 时 间 的 暂停 ， 因 为 测试 结束 时 浏览 右 将 关闭 。 在 测试 停止 的 
点 ， 可 以 由 一 个 人 接管 浏览 右 ， 并 执行 任何 可 能 需要 的 手动 操作 。 当 
开发 一 个 多 步 同 导 或 类 似 的 用 户 界 面 时 ， 这 往往 是 有 益 的 。 


在 Selenium 中 运行 QUnit 


At 


Selenium 能 很 好 地 运行 QUnit 测 试 。 要 实现 这 一 点 ， 只 需要 
Selenium 中 加 载 QUnit 页 面 并 运行 测试 。 也 可 以 选择 只 通过 传递 参数 到 
URL 字 符 串 运行 测试 的 一 个 子 集 。 通 过 整合 Selenium 与 QUnit， 可 以 把 
QUnit 中 的 浏览 器 测试 结果 导出 到 持续 整合 的 测试 工具 中 。 


Selenium 只 打开 QUnit 的 URL， 然 后 退 到 后 台 ， 等 得 测试 完成 。 为 
了 让 测试 工具 知道 测试 是 否 通 过 或 失败 ，QUnit 提 供 了 一 个 人 简单 的 微 格 
A 〈 见 例 3-12) ， 显 示 运 行 了 多 少 测试 ， 有 多 少 通过 或 失败 。 然 后 ， 
单元 测试 可 以 通过 XPath 选择 器 查看 此 数据 ， 并 确保 所 有 测试 通过 。 


在 例 3-11 中 ，PHP 程 序 打开 本 革 开 头 显 示 的 QUnit 测 试 ， 然 后 等 得 
测试 运行 。 当 测试 完成 后 ，gunit-testresult 元 素 将 插入 到 DOM 中 。 在 这 
一 点 上 ，Selenium 可 以 找到 运行 测试 的 数量 以 及 有 多 少 测试 通过 或 失 
败 。 例 3-13 展 示 了 用 PHP 代 码 从 Selenium 中 提取 QUnit 返 回 值 的 方法 。 


例 3-11: 运行 QUnit 的 Selenium 测 试 


<?php 
require_once 'PHPUnit/Extensions/SeleniumTestCase.php'; 
class WebTest extends PHPUnit_Extensions_SeleniumTestCase 


{ 
function testQUnit() 


{ 
// 这 里 在 QUnit 测 试 中 添加 你 的 HTML 文 件 的 URL 


$this->open('http://host.com/simple.htm1' ); 

$this- >waitForElementPresent("//p[@id='qunit-testresult']"); 

$failCount=$this- >getText("//p[@id=' qunit - 
testresult']/span[@class='failed']"); 

$passCount=$this- >getText("//p[@id=' qunit - 
testresult']/span[@class='passed']"); 

$totalCount=$this - >getText("//p[@id='qunit - 
testresult']/span[@class='total']"); 

$this- >assertEquals($passCount, $totalCount, 

"Check that all tests passed$passCount of$totalCount passed"); 

$this->assertEquals("0", $failCount, 

"Checking result of QUnit tests$failCount/$totalCount tests 
failed"); 

} 

function waitForElementPresent($element, $timeout=60) 

{ 

$time=0; 

while(!$this->isElementPresent($element)) 

{ 

$time++; 

if ($time >$timeout ) 

{ 


throw New Exception("Timeout: $element not found!"); 


} 
sleep(1); 
} 
} 
} 


例 3-12: QUnit 结 果 的 微 格式 


<p id="qunit-testresult"class="result"> 
Tests completed in 221 milliseconds. <br/> 
<span class="passed">1</span>tests of 
<span class="total" >2</span> passed, 
<span class="failed" >1</span> failed. 
</p> 


例 3-13: 从 QUnit 获 取 数 据 的 PHP 代 码 


<?php 


$failCount=$this- >getText("//p[@id=' qunit - 
testresult']/span[@class='failed']"); 

$passCount=$this- >getText("//p[@id=' qunit - 
testresult']/span[@class='passed']"); 

$totalCount=$this - >getText("//p[@id=' qunit - 
testresult']/span[@class='total']"); 

$this->assertEquals($passCount, $totalCount, 

"Check that all tests passed$passCount of$totalCount passed"); 

$this->assertEquals("0", $failCount, 

"Checking result of QUnit tests$failCount/$totalCount tests 
failed"); 


Selenium RC 及 一 个 测试 场 


重要 的 是 要 确保 应 用 不 只 在 一 个 浏览 器 上 运行 恨 好 ， 而 是 在 多 数 
的 浏览 器 和 平台 上 运行 民 好 。 在 大 多 数 情 况 下 ， 可 以 假设 应 用 可 能 会 
运行 在 Windows XP ` Windows Vista ` Windows 7 ` Mac OS XK. 
Linux 平 台 上 。 此 外 ， 用 户 可 能 使 用 Firefox、Chrome 、Internet 
Explorer、Safari 和 Opera 浏 览 右 ， 而 且 各 浏览 右 可 能 有 多 个 不 同 的 版 
本 。 


在 这 些 不 同 的 浏览 器 中 ，JavaScript 和 各 种 接口 的 实现 是 类 似 的 ， 
并 使 用 了 一 个 与 jQuery 类 似 的 框架 消除 一 些 差 异 ， 但 浏览 右 仍 然 不 完 
全 相同 。 因 此 ， 一 段 在 Firefox 中 行 之 有 效 的 代码 可 能 会 在 Chrome 或 
Safari 中 突然 月 并 。 当 然 ， 代 码 可 能 将 在 浏览 妖 的 一 个 版 本 中 有 效 ， 但 
在 较 旧 的 或 较 新 的 版 本 中 没有 效果 。 因 此 ， 跨 多 种 浏 贤 占 测试 十 至 关 
重要 的 。 然 而 ， 让 一 个 QA 团队 人 工 完成 它 可 能 是 期 望 过 高 的 ， 因 此 需 
要 目 动 化 实现 。 


Selenium RC 使 得 用 机 器 网 络 测试 所 有 这 些 不 同 的 组 成 部 分 成 为 可 
能 。 每 个 测试 机 必须 安装 有 Java。 在 许多 情况 下 ，Java 将 默认 安装 ， 
但 如 果 不 是 ， 下 载 并 安装 它 。 然 后 从 http:/seleniumhq.org/download/ 下 
载 Selenium RC 包 并 人 解压。 在 每 个 服务 器 上 ， 用 下 面 所 示 的 命令 局 动 


Selenium server jar ° 如 果 一 台 机 器 是 测试 场 中 的 成 员 ， 让 Selenium 服 
务 器 随机 妖 局 动 目 动 运 行 可 能 是 一 个 好 主意 。 通 常情 况 下 ，Selenium 
服务 名 采用 默认 安 锋 ， 它 提供 了 一 些 允 许 某 种 程度 目 定 义 的 命令 行 选 
项 。 具 体 来 说 ， 如 果 需 要 的 话 ， 可 以 用 端口 选项 改变 默认 的 4444 端 
口 。 这 可 以 用 来 在 一 人 台 服 务 器 上 运行 多 个 服务 需 实 例 ， 以 便 同 时 在 多 
AMA bias EM o 


java-jar selenium-server.jar[-port 4444] 


注意 : BORDEN MURS ae EA OR — Glas ° FEAL ae 
见 的 虚拟 机 技术 都 能 处 理 得 很 好 。 一 台 有 足够 RAM 的 功能 强大 的 服务 
妖 应 该 能 够 运行 一 个 小 型 的 实用 虚拟 测试 场 。 


如 采 需 要 在 Android 或 iOS 上 测试 应 用 ，Selenium 也 能 做 得 很 好 。 
有 一 个 Android 的 Selenium 驱 动 程序 
(http://code.google.com/p/selenium/wiki/AndroidDriver) ， 以 及 一 个 
iPhone 的 驱动 (http://code.google.com/p/selenium/wiki/IPhoneDriver) ° 
请 注意 ， 为 了 运行 iPhone 的 驱动 程序 ， 需 要 有 一 个 Mac 以 及 iPhone 的 开 
发 设置 。 由 于 iPhone store 中 没有 Selenium 张 动 程序 ， 需 要 会 用 提供 的 
配置 文件 在 手机 上 安装 它 ， 或 者 使 用 Xcode 中 的 模拟 右 。 


第 4 童 ” 本 地 存储 


Web 浏 览 侨 给 JavaScript 提 供 了 一 个 民 好 的 环境 ， 人 允许 它 创建 可 以 
在 浏览 器 上 运行 的 应 用 。 使 用 ExtJS 或 jQuery 可 以 构建 一 个 与 桌面 应 用 
媲美 的 多 用 途 应 用 程序 ， 并 提供 与 梨 面 应 用 一 样 油 单 的 分 布 式 方法 。 
然而 ， 浏 咒 占 在 提供 用 户 体验 方面 ， 当 涉及 数据 存储 时 曾 是 一 片 空 
=e 


从 历史 上 看 ， 浏 览 器 没有 通过 任何 方法 存储 数据 。 它 们 实际 上 是 
最 终 的 瘦 客 户 机 。 最 接近 的 可 能 是 HTTP cookie 机 制 ， 人 允许 在 每 个 
HTTP 请 求 中 附加 一 块 数据 。 然 而 ，cookie 遇 到 许多 问题 。 首 先 ， 每 个 
cookie 随 着 每 个 请 求 来 回 发 送 。 因 此 ， 浏 览 器 为 每 个 JavaScript 文 件 、 
图 片 、Ajax 请 求 等 发 送 cookie。 这 会 无 缘 无 故地 增加 大 量 的 带宽 使 
用 。 其 次 ， 试 图 创建 的 cookie 规 范 ， 使 不 同 的 子 域 之 间 可 以 共享 一 个 
cookie。 如 果 一 家 公司 有 app.test.com 和 images.test.com， 可 以 设置 一 个 
cookie 对 二 者 都 可 见 。 出 现 这 种 问题 的 原因 是 因为 在 美国 以 外 的 国 
家 ， 由 三 部 分 组 成 的 域名 成 为 普遍 现象 。 例 如 ， 可 以 在 co.i 主 机 中 设 
置 一 个 cookie， 人 允许 cookie 渗 透 到 以 色 列 的 几乎 所 有 主机 上 “。 不 能 每 当 
域名 中 包含 一 个 国家 的 后 缀 时 ， 就 简单 地 请 求 一 个 由 三 部 分 组 成 的 域 
名 ， 因 为 一 些 国家 如 加 拿 大 不 遵循 相同 的 约定 。 


在 浏览 左上 进行 本 地 存储 ， 可 能 成 为 速度 方面 的 一 大 优势 。 正 常 
的 Ajax 查询 根据 服务 器 的 不 同 可 能 化 费 半 秒 到 几 秒 的 时 间 。 然 而 ， 即 
使 在 最 好 的 情况 下 ， 也 可 能 相当 缓慢 。 从 我 在 特拉维夫 的 办 公 室 到 加 
利 福 尼 亚 的 一 个 服务 器 ， 一 个 简单 的 ICMP ping 人 花费 的 平均 时 间 约 为 
250ms。 在 这 250ms 中 ， 有 很 大 一 部 分 可 能 是 由 于 基本 的 物理 限制 : 数 
据 沿 着 导线 传送 ， 速 度 仅 为 光速 的 一 部 分 。 因 此 ， 只 要 数据 必须 在 济 
览 右 和 服务 器 之 间 往 返 ， 束 很 难 有 办 法 提高 访问 的 速度 。 


本 地 存储 选项 对 静 仿 的 或 大 多 是 静态 的 数据 是 一 个 非常 好 的 选 
择 。 例 如 ， 许 多 应 用 程序 有 一 个 国家 的 列表 作为 数据 的 一 部 分 。 即 使 
该 列表 中 包括 一 些 额 外 的 信息 ， 例 如 产品 是 否 在 每 个 国家 都 提供 ， 列 
表 也 不 会 频繁 变化 。 在 这 种 情况 下 ， 通 稼 将 数据 预 加 载 到 本 地 存储 对 
象 中 ， 然 后 在 必要 时 有 条 件 地 重 载 ， 这 样 用 户 将 获得 狐 的 数据 ， 而 不 
必 等 竺 当前 数据 。 


当然 ， 本 地 存储 对 于 处 理 一 个 可 以 脱 机 工作 的 Web 应 用 也 是 必 不 
可 少 的 。 虽 然 近 来 似乎 到 处 都 可 以 对 互联 网 进行 访问 ， 但 这 不 是 绝对 
的 ， 即 使 对 智能 手机 也 是 如 此 。 使 用 移动 设备 (如 iPod touch) 的 用 
户 ， 只 有 在 有 WiFi 的 地 方才 能 访问 互联 网 ， 甚 至 像 iPhone 或 Android 智 
能 手机 也 有 不 能 上 网 的 死 区 。 


BESHTML 5 的 发 展 ， 已 经 发 起 了 一 系列 运动 ， 为 浏览 锅 提 供 一 
种 创建 一 个 持久 的 本 地 存储 的 方法 ， 但 这 一 运动 的 结果 尚未 形成 。 如 


何在 客户 端 存储 数据 ， 目 前 至 少 有 三 个 不 同 的 方案 。 


在 2007 年 ， 作 为 Gears 的 一 部 分 ，Google 推 出 基于 浏览 器 的 SQLite 
数据 库 。 基 于 Webkit 的 浏览 器 ， 包 括 Chrome、Safari、iPhone 和 
Android 手 机 上 的 浏览 器 ， 实 现 了 一 个 Gears SQLite 数 据 库 版 本 。 然 
而 ，SQLite 从 HTML 5 方案 中 去 掉 了 ， 因 为 它 是 一 个 单 源 的 组 件 。 


localStorage 机 制 提 供 一 个 持续 跨 Web 重 载 的 JavaScript 对 象 。 这 种 
机 制 似乎 是 合理 的 、 一 致 的 和 稳定 的 。localStorage 对 于 存储 小 规模 的 
数据 ， 如 session 信 息 或 用 户 偏好 。 


本 章 介 绍 如 何 使 用 当前 的 localStorage 实 现 本 地 存储 。 在 下 面 的 章 
节 中 ， 将 看 到 已 经 出 现在 一 些 浏览 絮 中 的 更 加 复杂 和 先进 的 本 地 存储 
形式 : IndexedDB 。 


localStorage 和 sessionStorage 对 有 象 


现代 浏览 絮 为 程序 员 提 供 两 个 存储 对 象 ，localStorage 和 
sessionStorgage。 每 个 对 象 都 将 数据 保存 为 键 和 值 。 它 们 有 相同 的 接 
口 ， 以 同样 的 方式 工作 ， 除 了 一 个 例外 。localStorage 对 象 持 续 跨 浏览 
句 重 新 启动 ， 而 sessionStorage 对 象 在 浏览 器 的 session 重 新 启动 时 对 目 
身 进行 重 置 。 这 可 能 是 当 浏 览 絮 关闭 或 窗口 天 闭 的 上 时候。 确切 在 什么 
时 候 发 生 这 种 情况 将 取决 于 具体 的 浏览 右 。 


设置 和 获取 这 些 对 象 是 非常 简单 的 ， 如 例 4-1 所 示 。 
例 4-1: 访问 localStorage 


// 设 置 
localStorage.sessionID=sessiontId; 
localStorage.setItem('sessionID', sessionId); 
// 获 取 

var sessionId; 
sessionId=localStorage.sessionID; 
sessionId=localStorage.getItem('sessionId' ); 
localStorage.sessionId=undef ined; 
localStorage.removeItem('sessionId' ); 


浏览 右 存 储 如 cookies 实 现 了 一 个 “同根 同 源 ” 的 策略 ， 使 不 同 的 网 
站 互 不 干扰 或 读 取 对 方 的 数据 。 但 在 本 节 中 的 两 种 存储 对 象 都 存储 在 
用 户 的 磁盘 上 (与 cookies 相 似 ， 因 此 一 个 有 经 验 的 用 户 就 能 找到 方 
法 来 编辑 数据 。Chrome 的 开发 者 工具 允许 程序 员 编辑 存储 对 象 ， 可 以 
在 Firefox 中 通过 Firebug 或 一 些 其 他 工具 编辑 它 。 因 此 ， 尽 管 其 他 网 站 
不 能 向 存储 对 象 中 注入 数据 ， 但 是 这 些 对 象 仍然 不 应 该 被 信任 。 


Cookies 受 到 了 一 定 的 限制 : Cookies 的 大 小 只 限于 约 4KB， 必 须 通 
过 每 个 Ajax 请 求 传 送 到 服务 器 ， 大 大 提高 了 网 络 流量 。 浏 览 器 的 
localStorage 大 方 多 了 。HTML 5 规范 中 没有 对 大 小 列 出 确切 的 限制 ， 
但 大 多 数 的 浏览 器 为 每 个 Web 主 机 作 了 5MB 左 右 的 限制 。 程 序 员 不 应 
该 假定 一 个 非常 大 的 存储 区 域 。 


数据 可 以 通过 直接 访问 对 象 或 一 组 访问 函数 存储 在 存储 对 象 中 。 
Session 对 象 只 能 存储 字符 串 ， 因 此 存储 的 任何 对 象 类 型 都 要强 制 转换 
为 一 个 字符 串 。 这 意味 着 一 个 对 象 将 存储 为 [object Object]， 这 可 能 不 
是 想 要 的 结果 。 因 此 要 存储 一 个 对 象 或 数组 ， 先 将 其 转换 为 JSON e 


每 当 一 个 存储 对 象 中 的 值 发 生变 化 时 ， 它 会 触发 一 个 存储 事件 。 
此 事件 将 显示 键 、 它 原来 的 值 以 及 它 的 新 值 。 例 4-2 古 一 个 典型 的 数据 
结构 。 不 像 某 些 事件 《如 点 击 ) ， 存 储 事件 不 能 阻止 。 应 用 没有 办 法 
告诉 浏览 器 不 做 出 改变 。 变 化 发 生 后 ， 事 件 只 古人 简单 地 通知 应 用 。 


例 4-2: 例 4-2 存 储 事件 接口 


var storageEvent={ 
key: 'key', 
oldValue: 'old', 
newValue: 'newValue', 
url: 'url', 
storageArea: storage// 更 改 的 存储 区 
}; 


Webkit 在 开发 者 工具 中 提供 了 一 个 屏幕 ， 程 序 员 可 以 在 这 里 查看 
和 编辑 localStorage 和 sessionStorage 对 象 ( 见 图 4-1) 。 从 开发 者 工具 窗 
口 ， 单 击 "Storage" 选 项 卡 。 会 显示 一 个 页 面 中 的 localStorage 和 
SessionStorage 对 象 。 存 储 屏 医 也 是 完全 可 编辑 的 ， 可 以 在 这 里 对 键 进 
行 添 加 ， 删 除 和 编辑 。 


4-1 _ Chrome 存储 查看 器 


虽然 Firebug 不 像 Chrome 和 其 他 基于 WebKit 的 浏览 器 那样 提供 local 
Storage 和 sessionStorage 对 象 的 接口 ， 但 是 可 以 通过 JavaScript 控 制 台 访 
问 对 象 ， 而 且 可 以 在 这 里 对 键 进行 添加 、 编 辑 和 删除 操作 。 假 以 时 
H, 希望 有 人 会 写 一 个 Firebug 扩 展 ， 实 现 这 一 功能 。 


当然 ， 可 以 编写 一 个 自 定 义 界 面 查 看 和 编辑 任何 浏览 器 上 的 存储 
对 象 。 用 例 4-1 中 所 示 的 GetItem 和 removeItem 调 用 在 屏幕 上 创建 一 个 构 
件 ， 并 人 允许 通过 编辑 文本 框 进行 编辑 。 例 4-3 显 示 了 一 个 构件 的 框架 。 


例 4-3: FERE i 


(function createLocalStorageViewer ( ) 
{ 
$('<table></table>').attr( 


"id": "LocalStorageViewer", 
"Class": 'hidden viewer' 


}).appendTo( 'body'); 

localStorage.on('update', viewer.load); 

var viewer= 

{ 

load: function loadData() 

{ 

var data, buffer; 

var renderLine=function(line) 

{ 

return"<tr key='{key}'value='{value}' >\n".populate(line)+ 
"<td class='remove'>Remove Key</td>"+ 

"<td class='storage-key'>{key}</td><td>{value}</td></tr 
.populate( line); 

}; 

buffer=Object.keys(localStorage) .map(function(key) 

var rec= 

{ 

key: key, 

value: localStorage[data] 

}; 

return rec; 

}); 

}; 
$("#LocalStorageViewer") .html(buffer.map(renderLine).join('')); 
$("#LocalStorageViewer tr.remove").click(function( ) 


> T 


var key=$(this).parent('tr').attr('key').remove(); 
localStorage[key ]=undef ined; 


3); 
$("#LocalStroageViewer tr").dblclick(function() 


var key=$(this).attr('key'); 

var value=$(this).attr('value'); 

var newValue=prompt ("Change Value of"+key+"?", value); 
if (newValue! ==null1) 


localStorage[key ]=newValue; 
} 

}); 

}; 
}()); 


在 ExtJS 中 使 用 localStorage 


ExtJS 是 一 个 非常 流行 的 JavaScript 框 架 ， 人 允许 非常 复杂 的 交互 显 
示 ， 在 前 面 的 章节 中 展示 了 一 些 ExtJS 例 子 。 本 市 说 明 如 何 使 用 ExtJS 
的 localStorage ° 


ExtJS 的 一 个 不 错 的 功能 是 许多 对 象 可 以 记录 状态 。 例 如 ，ExtJS 
表格 对 和 象 允 许 用 户 调 整 列 的 人 尺寸， 隐藏 和 显示 它们 ， 并 重新 排列 它们 
的 顺序 ， 当 用 户 以 后 回 到 该 应 用 时 这 些 变化 都 记录 并 重新 显示 。 这 人 允 
许 每 个 用 户 定制 应 用 元 素 工 作 的 方式 的 。 


ExtJS 提 供 了 一 个 对 象 来 保存 状态 ， 但 要 使 用 cookie 储 存 数据 。 一 
个 复杂 的 应 用 可 以 创造 出 足以 超过 Cookie 大 小 限制 的 状态 数量 。 一 个 
包含 几 十 个 网 格 的 应 用 可 能 超出 cookie 的 大 小 ， 这 样 会 锁定 应 用 。 
此 使 用 localStorage 会 好 得 多 ， 利 用 其 较 大 容量 的 优势 ， 避 人 免 了 在 每 次 
请 求 中 发 送 数 据 到 服务 器 的 开销 。 


建立 一 个 自 定义 状态 provider 对 象 其实 是 很 容易 的 。 在 例 4-4 中 
provider 扩 展 了 通用 的 provider 对 象 和 三 个 方法 : set、clear 和 get。 这 些 
方法 向 单 地 读 取 和 写 入 存储 数据 。 在 例 4-4 中 ， 通 过 相当 简单 的 方法 使 
用 "state "字符 串 加 上 被 保存 元 素 的 ID 对 存储 的 数据 进行 索引 。 这 是 一 
个 合理 的 方法 。 


例 4-4: ExtJS 本 地 状态 提供 者 Local State Provider 


Ext.ux.LocalProvider=function(){ 


Ext.ux.LocalProvider.superclass.constructor.call(this); 

}; 

Ext.extend(Ext.ux.LocalProvider,Ext.state.Provider, { 

ff aa a a aaa aa oaa i e RRS LR aaa RR RNR OR RON ROKR AGAR ARE BE 
set: function(name, value) { 

if(typeof value=="undefined" | | value===null1) { 
localStorage['state_'+name]=undefined; 

return; 


} 
else{ 
localStorage['state_'+name]=this.encodeValue(value); 


} 


? 
生生 


//private 
clear: function(name) { 
localStorage['state_'+name]=undefined; 


? 
人 


get: function(name, defaultValue) { 

return Ext.value(this.decodeValue(localStorage['state_'+name]), 
defaultValue); 

} 

}); 

// 设 置 状态 处 理 函 数 

Ext.onReady(function setupState(){ 

var provider=new Ext.ux.LocalProvider(); 

Ext.state.Manager.setProvider (provider); 


}); 


也 可 以 用 一 个 大 型 对 象 存储 所 有 状态 数据 ， 并 将 该 对 象 存储 到 一 
个 存储 键 中 。 这 样 做 有 一 个 优点 ， 不 会 创建 大 量 的 存储 元 素 ， 但 会 使 
代码 比较 复杂 。 此 外 ， 如 采 有 两 个 窗口 符 试 更 新 存储 ， 其 中 之 一 可 能 
会 干扰 鸡 一 个 窗口 制造 的 变化 。 对 于 有 竞 争 条 件 的 问题 ， 这 里 没有 很 
好 的 解决 方案 。 通 币 ， 在 可 能 有 问题 的 地 方 ， 使 用 IndexedDB 或 一 些 
其 他 解决 方案 可 能 更 好 。 


离线 加 载 人 存储 数据 


当 应 用 使 用 的 某 些 持久 性 数据 是 相对 静态 的 数据 时 ， 为 更 快速 地 
访问 ， 将 其 加 载 到 本 地 存储 中 可 能 会 有 意义 。 在 这 种 情况 下 ， 
Ext.data.JsonStore 对 象 需要 进行 修改 ， 以 便 load0 方 法 在 localStorage 区 
域 中 查找 数据 ， 然 后 再 尝试 从 服务 器 加 载 数据 。 从 localStorage 加 载 数 
据 后 ，Ext.data.JsonStore 应 该 调用 服务 器 来 检查 数据 是 否 已 经 改变 。 这 
样 ， 应 用 程序 可 以 使 数据 立即 对 用 户 可 用 ， 而 且 只 需 花 费 尽 可 能 小 的 
短期 开销 。 这 样 可 以 使 用 户 界面 感觉 上 更 快 ， 并 减少 应 用 程序 占用 的 
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对 于 大 多 数 的 请 求 ， 数 据 不 会 改变 ， 因 此 数据 使 用 ETag 的 某 种 形 
式 是 非常 有 意义 的 。 通 过 一 个 HTTP GET 请 求 和 一 个 I-None-Match 头 
从 服务 器 请 求 数 据 。 如 果 服 务 器 确定 该 数据 并 没有 改变 ， 它 可 以 返回 
一 个 304 Not Modified 啊 应。 如 宁 数 据 已 更 改 ， 服 务 右 发 回 新 的 数据 ， 
并 在 Ext.data.JsonStore 对 象 和 sessionStorage 对 象 中 都 加 载 该 应 用 。 


Ext.data.PreloadStore 对 象 ( 见 例 4-6) 将 数据 作为 一 个 大 型 的 JSON 
WR ( 见 例 4-5) 存储 到 session 缓 在 中 。 进 一 步 将 服务 器 返回 的 数据 包 
装 到 JSON 闭 包 ， 这 使 得 它 能 够 存储 一 些 元 数据 。 在 这 种 情况 下 ， 存 储 
ETag 数 据 和 数据 加 载 的 日 期 。 


例 4-5: Ext.data.PreloadStore 离 线 数据 格式 


{ 
"etag": "25f9e794323b453885f5181f1b624d0b", 
"loadDate": "26-jan-2011", 


"data": { 
root": [{ 
"code": Tys" 
"name": "United States" 
"code": Téga" 
"name": "Canada" 
}] 
} 
} 


注意 ; 当 构 建 一 个 ETag 时 ， 请 务必 使 用 一 个 好 的 喻 希 函 数 。MD5 
可 能 是 最 好 的 选择 。 也 可 以 用 SHA1， 但 它 会 产生 一 个 非常 长 的 字符 
串 ， 因 此 可 能 不 可 取 。 从 理论 上 讲 ，MD5 可 能 会 被 破解 ， 但 在 缓存 控 
制 的 操作 中 ， 不 需要 为 此 担心 。 


localStorage 对 象 中 的 数据 可 以 从 背景 中 改变 。 正 如 已 解释 过 的 ， 
用 户 可 以 通过 Chrome 开 发 者 工具 或 Firebug 的 命令 行 改 变 该 数据 。 或 者 
也 可 能 只 是 碰巧 用 户 有 两 个 相同 浏 贤 厦 打开 了 同一 个 应 用 。 因 此 监听 
localStorage 对 象 的 更 新 事件 对 store 非 常 重要 。 


大 部 分 的 工作 在 beforeload 事 件 处 理 函 数 中 完成 。 该 处 理 函 数 检 查 
存储 数据 的 缓存 副本 ， 如 果 存 在 ， 加 载 它 到 Store 中 。 如 果 有 数据 出 
现 ， 该 处 理 函 数 也 将 重新 载 入 数据 ， 但 会 使 用 Function.defer(0 方 法 延迟 


加 载 ， 直 到 系统 有 望 完成 加 载 网 页 的 时 间 ， 因 此 这 样 做 加 载 将 很 少 会 
干扰 用 户 。 


store.doConditionalLoad() 方 法 使 Ajax 调用 服务 器 加 载 数据 。 它 包 
含 的 If-None-Match 尖 ， 这 样 ， 如 琳 数 据 没 有 改变 ， 束 会 加 载 当 前 的 数 
据 。 它 还 包括 一 个 强制 选项 ， 使 beforeload 处 理 函 数 加 载 新 的 数据 ， 而 
不 是 试图 刷新 localStorage 中 对 象 缓存 版 本 存储 的 数据 。 


一 般 把 SECOND、MINUTE 和 HOUR 定 义 为 常数 ， 这 样 做 只 是 为 
了 使 代码 更 具 可 读 性 。 


例 4-6: Ext.data.PreloadStore 


Ext.extend(Ext.data.PreloadStore,Exta.data.JsonStore, { 
indexKey: '', 

// 默 认 索 引 键 

loadDefer: Time.MINUTE, 

// 加 载 数据 需要 加 载 多 长 时 间 

listeners: { 

load: function load(store, records, options) 

{ 

var etag=this.reader.etag; 

var jsonData=this.reader.jsonData; 


var data= 
{ 
etag: etag, 


date: new date(), 
data: jsonData 
}; 


sessionStorage[store.indexKey]=Ext.encode(data); 


beforeload: function beforeLoad(store, options) 


{ 
var data=sessionStorage[store.indexKey]; 
if (data===undefined| |options.force) 


{ 

return true; // 缓 存 中 没有 ， 从 服务 器 加 载 

} 

var raw=Ext.decode(data); 

store. loadData(raw.data); 

// 推 迟 重新 加 载 数据 直到 条 件 达 到 

store.doConditionalLoad.defer(store.loadDefer, store, 
[raw.etag]); 

return false; 

} 

ie 

doConditionalLoad: function doConditionalLoad(etag) 

{ 

this.proxy.headers["If-None-Match" ]=etag; 

this. load( 

{ 

force: true 

}); 

ig 


forceLoad: function() 


{ 

// 在 一 个 虚 ETag 中 传递 强制 加 载 
this.doConditionalLoad(''); 
} 

}); 


为 以 后 服务 此 同步 存储 变化 


在 一 个 应 用 可 以 离线 使 用 或 片 状 连接 到 互联 网 的 事件 中 ， 癌 用 户 
提供 一 种 不 需要 有 网 络 存在 的 保存 修改 的 方法 应 该 会 获得 不 错 的 效 
果 。 要 做 到 这 一 点 ， 把 每 个 记录 中 的 变化 写 入 一 个 localStorage 对 和 象 的 
队列 中 。 当 浏览 锅 再 次 联机 时 ， 队 列 可 以 推送 到 服务 右 。 这 类 似 于 数 
据 库 中 使 用 的 事务 日 志 。 


存储 队列 如 例 4-7 所 示 。 队 列 中 的 每 个 记录 代表 在 服务 右上 要 采取 
的 一 个 行动 。 当 然 ， 确 切 的 格式 将 根据 特定 应 用 的 需求 而 确定 。 


例 4-7: 存储 队列 数据 


[ 
"url": "/index.php", 


"params": {} 


"url": "/index.php", 
"params": {} 


"url": "/index.php", 
"params": {} 


} 
] 


一 旦 Web 浏 览 右 回 到 联机 状态 ， 束 有 必要 人 处理 队列 中 的 项 目 。 例 
4-8 获 取 该 队列 ， 并 将 第 一 个 元 素 发 送 到 服务 器 。 如 有 果 该 请 求 成 功 ， 则 
取 下 一 个 元 素 ， 并 继续 处 理 队列 中 的 元 素 ， 直 到 整个 队列 发 送 完成 。 
即使 队列 很 长 ， 因 为 Ajax 以 异步 方式 处 理 每 个 项 目 ， 所 以 该 过 程 的 执 
行 也 会 实现 对 用 户 的 影响 最 小 。 为 了 减少 Ajax 调 用 的 数量 ， 也 可 以 将 
该 代码 修改 为 按 组 发 送 队 列 ， 每 次 发 送 5 个 。 


例 4-8: 存储 队列 


var save=function save(queue) 
{ 

if(queue.length>0) 

{ 

$.ajax( 

{ 

url: 'save.php', 

data: queue.slice(0, 5), 
success: function(data, status, request ) 
save(queue.slice(5) ); 

}); 

} 

}; 


jQuery 插件 


如 果 所 有 客户 端 存储 选项 的 不 确定 性 多 得 让 人 抓 狂 ， 还 可 以 有 其 
他 选择 。 因 为 JavaScript 中 有 许多 东西 ， 可 以 用 一 个 提供 更 好 接口 的 模 
块 覆 凋 一 个 不 一 致 的 坏 接 口 。 这 里 有 两 个 这 样 的 模块 ， 可 以 使 工作 更 
轻松 。 


DSt 


DSt (http://github.com/gamache/DSt) 是 一 个 包装 localStorage 对 象 
的 简单 的 类 库 。DSt 可 以 是 一 个 独立 的 或 作为 jQuery 插件 工作 的 类 库 。 
它 会 目 动 将 复 洒 的 对 象 转换 成 任何 一 个 JSON 结 构 。 


DSt 还 可 以 保存 和 恢复 表单 的 元 素 或 者 整个 表单 的 状态 。 传 递 元 
素 或 元 素 的 ID 到 DSt.store() 方 法 可 以 保存 和 恢复 元 素 。 之 后 ， 要 恢复 该 
元 素 ， 则 传递 该 元 素 到 DStrecall0) 方 法 。 


要 存储 整个 表单 的 状态 ， 使 用 DStstore_form() 方 法 。 它 把 ID 或 表 
单 本 里 的 元 素 作为 参数 。 该 数据 可 以 用 DSt.populate_form() 方 法 恢复 。 
例 4-9 是 DSt 最 简单 的 使 用 方法 。 


例 4-9: DSt 接 口 


$.DSt.set('key', 'value'); 

var value=$.DSt.get('key'); 
$.DSt.store('element'); // 存 储 一 个 form 元 素 的 值 
$.DSt.recall('element'); // 再 次 调用 form 元 素 的 值 
$.DSt.store_form('form'); 
$.DSt.populate_form('form' ); 


jStore 
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况 创 建 不 同 的 代码 ， 有 一 个 好 的 解决 方案 jQuery 的 jStore 插 件 
(http://twablet.com/docs.html?p=jstore) 。 该 插件 支持 localStorage、 
sessionStorage、Gears SQLite 和 HTML 5 SQLite， 以 及 Flash Storage 
ANF) 和 正 7 的 专 有 解决 方案 。 


jStore 插 件 有 一 个 简单 的 接口 ， 允 许 程序 员 将 “和 名称 / 值 ?对 存储 在 
不 同 的 存储 引 警 中。 它 为 所 有 引擎 提供 了 一 组 接口 ， 以 便 在 给 定 浏 览 
右 不 存在 存储 引擎 的 情况 下 ， 程 序 可 以 在 需要 时 适当 降级 。 


jStore 插 件 在 jQuery.jStore.Availability 实 例 变 量 中 提供 了 一 个 可 用 
的 引擎 列表 。 程 序 应 该 选择 最 有 意义 的 引擎 。 


对 于 需要 多 浏览 万 文 持 的 应 用 ， 这 可 能 是 一 个 有 益 的 补充 。 详 情 
请 参阅 jStore 网 页 。 


第 5 章 IndexedDB 


本 地 存储 接口 〈 见 第 4 章 ) 为 存储 少量 数据 提供 了 一 个 民 好 的 接 
口 ， 但 是 在 许多 情况 下 浏览 絮 将 此 存储 空间 限制 在 5MB。 如 有 果 应 用 的 
存储 需要 超过 该 限制 ， 或 者 应 用 要 求 查 询 能 够 访问 结构 化 的 数据 ， 那 
么 本 地 存储 束 不 是 最 好 的 选择 。 在 这 种 情况 下 ， 应 用 开发 人 员 有 更 健 
壮 的 存储 机 制 可 用 。IndexedDB 在 许多 浏览 器 上 提供 了 这 种 机 制 。 例 
如 ， 程 序 员 可 以 在 IndexedDB 中 保存 产品 目 了 永 数 据 ， 因 此 ， 当 用 户 搜 
索 一 个 项 目 时 ， 浏 咒 絮 并 不 需要 到 服务 右 去 寻找 某 个 项 目的 数据 。 


IndexedDB 是 一 种 NoSQL 数 据 库 ， 如 有 果 使 用 过 MongoDB 或 
CouchDB 这 类 产品 ， 那 么 就 会 感到 很 熟悉 。 程 序 可 以 直接 在 
IndexedDB 数 据 存储 中 存储 JavaScript 数 据 。 


Firefox 从 版 本 4 开始 包含 IndexedDB。Google Chrome 从 版 本 11 起 也 
引入 了 IndexedDB。Microsoft 在 其 HTML 5 实验 室 网 站 
(http://html5labs.interoperabilitybridges.com) 有 一 个 作为 ActiveX 控 件 
的 版 本 ， 可 手动 加 入 下 中 ， 在 可 预见 的 未 来 可 能 出 现在 下 的 主 发 布 版 
本 中 ， 也 可 能 在 未 来 的 一 年 或 两 年 后 ， 其 他 浏览 硕 中 也 有 IndexedDB 
可 用 。 形 式 上 ，IndexedDB 现 在 是 一 个 来 自 W3C 的 建议 草案 
(http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html) ° 


EB: 因为 到 目前 为 止 只 有 两 个 浏览 器 支持 IndexedDB， 所 以 
IndexedDB 的 使 用 应 限制 在 应 用 程序 内 部 ， 可 以 限制 所 选择 的 浏览 
器 。 在 一 般 的 应 用 中 使 用 它 ， 应 格外 小 心 ，Microsoft Internet 
Explorer、Opera 和 Safari 还 不 支持 此 功能 〈 至 少 到 2011 年 7 月 为 止 ) 。 


与 localStorage 一 样 ，IndexedDB 有 着 严格 的 同 源 策 略 。 因 此 页 面 
创建 的 数据 库 不 能 被 其 他 主机 上 的 网 页 访问 。 这 为 数据 提供 一 个 安全 
等 级 ， 因 此 它 被 保护 不 受 其 他 页 面 上 运行 的 脚本 干扰 。 但 页 面 上 运行 
的 任何 创建 数据 库 的 脚本 具有 完全 访问 该 数据 库 的 权限 ， 当 然 ， 用 户 
具有 该 数据 的 访问 权限 。 


IndexedDB 比 SQLite 具 有 如 下 几 个 优势 。 首 先 ， 其 原生 的 数据 存储 
格式 是 一 个 JavaScript 对 象 ， 不 需要 将 一 个 JavaScript 对 象 映射 到 一 个 
SQL 表 结 构 ， 而 SQL 表 结 构 不 太 好 ， 易 遭 到 SQL 注入 攻击 。 注 入 式 攻 
击 不 会 发 生 在 IndexedDB 上 ， 虽 然 在 某 些 情况 下 XSS 可 能 是 一 个 问题 ， 
例如 用 户 将 JavaScript 加 到 数据 库 中 ， 然 后 再 放 到 一 个 页 面 中 。 


IndexedDB 数 据 存 储 提供 了 一 组 接口 ， 在 本 地 磁盘 上 存储 JavaSript 
对 象 。 每 个 对 象 都 必须 有 一 个 键 ， 能 通过 该 键 检 索 对 象 ， 也 可 能 还 有 
第 二 个 键 。 


与 许多 原生 JavaScript 接 口 一 样 ，IndexedDB 的 原生 接口 也 是 非常 
星 涩 ， 所 以 有 点 难 用 。 但 是 义 与 许多 其 他 JavaScript 接 口 一 样 ， 


IndexedDB 被 封闭 成 jQuery 插件 ， 因 此 API 非 常 优 雅 。 本 章 所 有 的 例子 
都 会 用 封装 好 的 插件 进行 演示 ， 因 为 这 样 的 代码 比 使 用 原始 接口 的 代 
码 更 容易 理解 。 当 然 ， 如 果 可 以 选择 的 话 我 也 建议 你 这 样 使 用 
IndexedDB ° 
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有 一 个 记录 格式 ， 如 例 5-1 所 示 。 本 例 将 按 title 和 price 子 段 进行 索引 ， 
以 便 用 户 进 行 查 询 。 


例 5-1: 设置 事务 版 本 


{ 

"title": "Real World Haskell", 
"orice": 49.95, 

"orice_can": 49.95, 

"authors": [ 

"Bryan O'Sullivan", 

"John Goerzen", 

"Don Stewart" 

] ， 
"cover_animal": "Rhinosorus Beatle", 
"cover_url": "http://...", 

"topics": ["Haskell"] 


IndexedDB 通 过 内 置 的 版 本 控制 系统 保持 应 用 程序 和 相关 的 数据 
存储 同步 更 新 。 每 个 数据 存储 都 有 一 个 版 本 ， 应 用 可 以 在 加 载 时 对 其 
进行 检查 。 如 果 不 是 最 新 版 本 ， 应 用 可 以 采取 适当 的 动作 ， 通 过 创建 
新 对 象 和 索引 使 其 成 为 最 新 版 本 。 这 一 部 分 已 经 目 动 化 了 ， 因 为 当 结 
构 有 变化 的 时 候 ，Indexed DB 的 jQuery 接口 会 按 需 更 新 版 本 。 


当 加 入 了 新 的 数据 存储 或 索引 时 ， 版 本 应 随 之 改变 。 当 索引 或 存 
储 被 删除 时 ， 版 本 也 必须 相应 改变 。IndexedDB 的 jQuery 模块 会 目 动 完 
成 这 些 工作 。 我 们 只 需要 让 应 用 程序 检查 不 同 的 objectStores 对 和 象 和 
indexes 是 否 存在 殉 能 保证 格式 是 正确 的 。 如 例 5-2 所 示 ， 如 有 果 index 不 
存在 束 会 目 动 创建 一 个 。 


例 5-2: 创建 索引 


$.indexeddb(db).objectStore(objectStore) .index(field); 


与 IndexedDB 的 交互 必须 通过 事务 的 方式 实现 。 因 为 theIndexedDB 
接口 是 异步 的 ， 而 且 IndexedDB 可 以 从 一 个 Web Worker 或 运行 在 男 一 
个 线程 中 的 第 二 个 窗口 访问 (在 JavaScript 中 的 每 个 窗口 中 运行 其 自己 
的 线程 ，。 尽 管 同 时 访问 的 情况 很 罕见 ， 但 是 多 个 JavaScript 线 程 同 时 
访问 一 个 给 定 的 mdexedDB 数 据 库 的 情况 还 是 可 能 出 现 ， 因 此 接口 必 
须 防 止 竞争 条 件 。 


JER: IndexedDB 接 口 规范 包括 一 个 可 以 在 Web Worker 中 使 用 接 
口 的 同步 版 本 ， 但 是 还 没有 在 浏览 器 中 实现 。 此 外 ， 使 用 该 接口 的 代 
码 不 能 在 WebWorker 和 非 WebWorker 环 境 之 间 重 用 。 


IndexedDB 中 数据 存储 的 基本 单位 是 数据 库 。IndexedDB 中 的 数据 
库 是 关系 型 数据 库 ， 与 MySQL 数 据 库 的 大 致 相同 。 每 个 mdexedDB 数 


据 库 包含 一 个 或 多 个 ObjectStores， 可 等 同 于 SQL 数据 库 中 的 表 。 但 是 
与 SQL 数据 库 不 同 ，ObjectStores 没 有 固定 的 结构 。 


ObjectStores 中 的 每 个 记录 是 一 个 键 / 值 对 ， 其 中 键 是 主 索 引 ， 值 是 
一 个 JavaScript 对 象 。 任 何 可 序列 化 的 JavaScript 对 象 都 可 插入 到 存储 对 
象 中 。 


警告 ，IndexedDB 中 一 般 不 能 存储 闭 包 和 函数 。 


使 用 IndexedDB 的 第 一 步 是 创建 一 个 新 的 数据 库 。 这 一 步 只 需要 
选 一 个 数据 库 名 ， 并 请 求 打开 它 。 如 末 数 据 库 不 存在 ， 束 创建 它 。 如 
果 存 在 ， 则 直接 打开 它 。IndexedDB 的 jQuery 插件 让 它 非 常 简单 ， 又 需 
要 给 数据 库 一 个 名 字 整 行 : 


$.indexeddb(db); 


数据 库 打 开 后 ， 要 创建 一 个 事务 对 象 。 创 建 该 对 象 的 函数 将 使 用 
一 个 存储 对 象 列表 ， 以 及 一 个 可 选 的 模式 变量 和 超时 。 该 模式 变量 可 
以 是 IDB Transcation.READ_ONLY、IDBTranscation.READ_WRITE 或 
IDBTranscation.VERSION_CHANGE ， 默 认为 
IDBTranscation.READ_ONLY。 超 时 指定 以 ms 为 单位 ， 如 果 没 有 超 
时 ， 则 可 以 设置 为 0。 


由 于 IndexedDB 的 jQuery API 为 每 个 简单 操作 都 隐 式 地 创建 了 事 
务 ， 所 以 只 有 在 需要 同时 更 新 两 个 以 上 的 objectStore 或 者 做 一 些 奇怪 
的 操作 时 ， 才 需要 像 例 5-3 一 样 创 建 显 式 事务 。 在 使 用 map、forEach 或 
者 之 类 的 操作 循环 添加 列表 项 的 时 候 ， 为 了 让 所 有 数据 存储 时 表现 出 
一 臻 行为， 也 有 可 能 需要 创建 显 式 事务 。 当 事务 创建 完成 之 后 ， 需 要 


调用 transaction.done() 提 交 事 务 ， 或 者 用 transaction.abort() 进 行 回 深 。 


例 5-3: 使 用 显 式 事务 


var transaction=$.indexeddb(db).transaction([], 

IDBTransaction.READ_WRITE); 

transaction. then(write,writeError); 

data.map(function(line) { 

transaction.objectStore(objectStore).add(line).then(write, writeE 
rror); 

return line; 

}); 


transaction. done(); 


添加 、 更 新 记录 


所 有 添加 到 一 个 IndexedDB 数 据 库 的 数据 必须 要 在 一 个 事务 的 内 
部 完成 ， 这 可 以 防止 其 他 JavaScript 进 程 修 改 同 一 数据 。 尽 管 JavaScript 
是 单线 程 的 ， 从 一 个 Web Worker 或 者 同一 个 浏览 器 中 的 第 二 个 窗口 中 
都 可 以 打开 该 数据 存储 ， 并 且 都 能 同时 修改 同一 数据 。 


一 般 来 说 ， 如 例 5-4 所 示 ， 癌 objectStore 对 象 中 添加 一 条 记录 ， 只 
需要 调用 对 象 的 add0) 方 法 。 它 会 目 动 创建 对 应 的 事务 。 


例 5-4: 添加 一 行 数据 


$.indexeddb(db).objectStore(objectStore).add(book).then(wrap,err 
) ; 


如 果 需 要 添加 多 条 数据 ， 可 以 使 用 例 5-5 所 示 的 事务 。 在 所 有 探 作 
完成 之 后 该 事务 才 会 被 提交 。 调 用 transaction.done() 方 法 之 后 会 将 事务 
会 标记 为 完成 ， 此 时 整个 事务 才 会 被 提交 。 


例 5-5: 添加 多 行 数据 


var transaction=$.indexeddb(db).transaction([], 
IDBTransaction.READ_WRITE); 

transaction. then(write,writeError); 

data.map(function(record) { 

transaction.objectStore(objectStore).add(record).then(write, writ 
eError); 


}); 


正如 add0 方 法 一 样 ， 可 以 用 update() 方 法 更 新 一 条 记录 。 区 别 是 ， 
如 果 记 录 不 存在 那么 update() 方 法 会 返回 失败 。 


如 果 需 要 一 次 性 更 新 多 条 记录 ， 可 以 用 cursor ( 详 见 本 章 的 “检索 
数据 ”一 节 ) 遍历 这 组 数据 。 这 种 情况 下 ， 用 一 个 回调 函数 调用 cursor 
的 updateEach(O) 方 法 。 这 个 函数 会 被 cursor 指 同 的 每 个 元 素 上 调用 ， 它 


的 返回 值 是 该 条 记录 更 新 后 的 值 ， 这 些 值 会 在 所 有 条 目 处 理 完成 之 后 
写 回 数据 库 中 。 返 回 值 为 false 的 行 不 会 体 存 。 


ANIMES | 


索引 只 能 在 一 个 setVersion 事 务 中 添加 或 删除 。 索 引 可 以 在 
objectStore 被 创建 的 时 候 一 起 创建 ， 也 可 以 在 objectStore 创 建 之 后 调用 
index() 方 法 完成 ( 见 例 5-6) 。index() 方 法 在 索引 不 存在 的 时 候 会 创建 
索引 ， 它 还 会 返回 一 个 index 对 象 用 于 再 历 该 索引 。 


例 5-6: 使 用 索引 


$.indexeddb(db).objectStore(objectStore).index(field).openCursor 
([1, 10]).each(write); 


在 IndexedDB 类 似 的 数据 存储 与 多 数 其 他 数据 存储 之 间 的 一 个 关 
刍 的 区 别 是 IndexedDB 运 行 在 客户 的 浏 咒 絮 上 ， 因 此 更 狐 它 需要 比 在 
中 央 位 置 的 一 小 组 服务 右上 运行 的 数据 存储 机 制 考 虑 得 更 多 。 
JavaScript 代 码 必 须 能 够 应 付 ， 用 户 可 能 有 一 个 过 期 的 存储 及 动态 更 新 
的 可 能 性 。 


你 可 以 检查 用 户 电 脑 中 存储 对 象 正在 使 用 的 数据 库 版 本 ， 如 采 需 
要 的 话 ， 还 可 以 把 版 本 更 新 到 最 狐 。 举 个 例子 ，1.0 版 本 的 数据 库 软 件 
创建 了 两 个 存储 对 象 ， 在 1.1 碑 本 又 添加 了 第 三 个 存储 对 象 ， 并 对 人 存储 
对 象 中 的 一 个 数据 库 表 闫 加 了 索引 。 通 过 代码 检查 存储 对 象 的 版 本 ， 
可 以 知道 是否 需要 对 存储 对 象 进行 必要 的 更 新 ， 或 者 至 少 确认 该 用 户 


的 存储 对 象 是 不 是 正常 的 。IndexedDB 的 jQuery 插件 会 自动 处 理 这 些 问 


题 。 


检索 数据 


在 将 数据 存储 到 存储 对 象 中 后 ， 需 要 有 一 种 方法 得 询 和 显示 数 
据 。 查 询 数据 的 方式 有 好 几 种 ， 程序 可 能 希望 输出 所 有 数据 、 一 部 分 
数据 或 者 一 条 数据 。 


如 例 5-7 所 示 ， 可 以 用 get0) 方 法 通过 主键 检索 存储 对 象 中 的 一 条 数 
据 。get(0 方 法 返回 一 条 可 以 被 then() 方 法 访问 的 对 象 。then0) 方 法 需要 
两 个 回调 函数 作为 参数 : ee 
调用 ， 第 二 个 参数 是 为 以 防 万 一 返回 错误 对 象 时 调用 。 


例 5-7: 得 到 一 行 数 据 


$.indexeddb(db).objectStore(objectStore).get(primaryKey) .then(wr 
ap,err); 


通过 索引 查询 数据 库 的 单条 或 者 特定 范围 的 多 条 数据 也 很 容易 。 
首先 指定 一 个 特定 的 索引 ， 然 后 用 openCursor() 得 到 cursor,openCursor() 
的 参数 需要 指定 一 个 可 访问 的 范围 ， 这 个 范围 的 两 端 可 以 是 开 区 间 也 
可 以 是 财 区 间 。 例 5-8 展 示 了 一 个 典型 的 碍 询 语句 。 


例 5-8， 得 到 一 定 范围 内 的 数据 行 


$.indexeddb(db).objectStore(objectStore).index('title').openCurs 
or ( [MIN, MAX]).each(write); 


range 古 通过 形式 为 [lower,upper,lowerExclusive,upperExclusive] 的 4 
元 素数 组 设 定 的。 前 两 个 元 素 是 整 型 ， 后 两 个 元 素 是 可 选 的 ， 为 布尔 
型 。range 默 认 是 开 区 间 的 ， 也 融 是 说 [10，20] 指 定 的 范围 是 11 僵 19 。 
但 是 [10，20，false,false] 指 定 的 范围 在 搜索 时 会 包含 两 端点 。 


如 果 只 想 用 指定 的 上 界 或 者 下 界 搜索 ， 只 需要 设置 不 用 的 参数 为 
undefined。 如 [10，underfined,false] 返 回 所 有 大 于 等 于 10 的 键 值 ， 而 
[undefined，10，undefined,true] 返 回 所 有 小 于 10 的 键 值 。 要 得 到 一 个 特 
定 的 值 ， 可 以 指定 类 似 [10，10，false,false] 这 样 的 范围 。 


最 后 一 种 情况 是 需要 得 到 整个 存储 对 象 的 内 容 。 这 种 情况 下 不 需 
要 指定 索引 (除非 需要 将 记录 排序 ， 所 以 可 以 直接 在 objectStore 对 
象 上 调用 openCursor0。 回 调 函 数 write 会 依次 在 每 个 元 素 上 调用 ， 如 例 
5-9 所 示 。 


例 5-9: 得 到 所 有 行 


$.indexeddb(db).objectStore(objectStore).openCursor().each(write 
); 


删除 效 据 


从 一 个 存储 对 象 中 删除 数据 也 很 容易 。 每 个 存储 对 象 有 一 个 
delete() 方 法 ， 可 以 用 将 要 删除 的 记录 索引 为 参数 进行 调用 。 存储 将 删 
除 这 些 记录 ， 人 然后 调用 回调 ， 如 例 5-10 所 示 。 


例 5-10: 删除 数据 


$.indexeddb(db).objectStore(objectStore).remove(id).then(write,e 
rr); 


你 可 以 调用 cursor 的 deleteEach(0) 方 法 遍历 和 删除 选中 的 行 。 


方法 的 行为 类 似 于 数组 过 滤 函 数 ， 删 除 函 数 中 返回 true 的 记录 。 如 例 5- 
11 所 示 ， 删 除 函 数 isDuplicate0 返 回 true 的 所 有 记录 © 


例 5-11: 删除 重复 的 数据 


$.indexeddb(db).objectStore(objectStore).openCursor().deleteEach 
(function(value, key) 

{ 

return isDuplicate(value); 


}); 


第 6 章 ”文件 


由 于 众所周知 的 原因 ， 浏 贤 器 访问 文件 系统 的 能 力 历来 非常 有 
限 。 虽 然 HTML 表 单 已 经 能 够 上 传 文件 ， 而 且 某 些 HTTP 标 头 还 可 以 让 
用 户 从 服务 硕 上 下 载 文件 。 但 是 ， 除 了 这 些 特 殊 功 能 之 外 ， 浏 览 郁 不 
能 够 访问 本 地 文件 系统 上 的 文件 。 一 般 来 说 ， 这 是 一 件 好 事 。 谁 都 不 
希望 访问 的 每 个 网 页 都 能 查看 目 己 的 硬盘 ! 


HTML 5 的 一 些 新 功能 让 浏览 器 访问 文件 系统 有 点 受 限 。 新 的 浏 
览 右 允许 JavaScript 通 过 现 有 表单 中 的 文件 输入 域 对 文件 进行 访问 。 过 
去 浏览 器 可 以 通过 表单 上 传 文件 ， 而 现在 可 以 在 JavaScript 中 通过 文件 
直接 使 用 数据 。 此 外 ， 现 在 浏览 右 还 可 以 将 文件 从 村 面 拖 动 到 Web 悄 
用 中 。Google 的 Gmail 使 用 此 功能 允许 用 户 添加 附件 。 这 一 功能 早先 已 
在 Flash 中 实现 了 ， 但 是 现在 只 需 使 用 JavaScript 束 能 实现 了 。 


这 样 不 会 产生 任何 新 的 安全 问题 ， 因 为 应 用 程序 先 把 这 些 数 据 上 
传 到 服务 器 ， 然 后 再 下 载 到 浏览 器 进行 访问 。 


截至 本 书 编写 时 ，Firefox、Chrome 和 Opera 已 经 支持 这 些 功能 。 
对 于 Safari 和 Internet Explorer， 可 以 通过 Flash 揪 件 实现 文件 拖 暇 。 


二 进 制 大 对 象 


JavaScript 对 字符 串 和 数字 一 直 处 理 得 很 好 ， 二 进 制 数据 从 来 就 不 
是 它 的 强项 。 但 是 最 近 JavaScript 已 增加 了 一 个 blob 数 据 类 型 和 接口 ， 
用 于 处 理 二 进 制 大 对 象 (blob) 。JavaScript 将 blob 视 为 一 大 块 元 数 
据 。 因 此 ，JavaScript 可 以 对 blob 进 行 的 实际 操作 十 分 有 限 。 然 而 ， 
blob 对 移动 二 进 制 数据 非常 重要 。blob 可 以 从 文件 中 读 取 或 者 写 入 文 
件 中 (本 幕后 面 的 “文件 处 理 *”) ， 作 为 URL 的 使 用 ， 存 入 IndexedDB 
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可 以 用 BlobBuilder 接 口 创建 一 个 新 的 blob。 这 样 将 创建 一 个 基本 
的 空 BlobBuilder， 可 以 从 ArrayBuffer 给 它 妃 加 一 个 字符 串 、 已 有 的 
blob 或 者 二 进 制 数 据 。BlobBuilder.getBlob0 方 法 返回 实际 的 blob。 


BlobBuilder 在 Firefox 6 中 称 为 MozBlobBuilder， 在 Safari Nightly 版 
本 和 Chrome 8 中 称 为 WebKitBlobBuilder ° 


例 6-1 中 ， 原 始 PNG 数 据 传递 给 一 个 BlobBuilder 对 象 ， 用 于 创建 一 
个 blob， 然 后 将 blob 变 成 一 个 URL。URL 对 象 可 以 在 DOM 中 通过 一 个 
图 像 标记 的 src 属 性 进行 设置 。 


例 6-1: 用 原始 数据 创建 一 个 blob URL 


/*global window, $, BlobBuilder, document, XMLHttpRequest*/ 
/*jslint onevar: false,white: false*/ 
function makePNG(pngData) 


var BlobBuilder=window.BlobBuilder | |window.MozBlobBuilder | | 
window.WebKitBlobBuilder; 

var blob=new BlobBuilder(); 

blob.append(pngData); 

var url=blob.getBlob('image/png').createObjectURL(); return url; 


利用 slice() 方 法 提取 blob 中 的 一 部 分 。 因 为 slice 的 参数 与 array 和 
string 的 同名 方法 的 参数 不 同 ， 在 Firefox 和 Chrome 中 已 经 分 别 被 重 命名 
为 mozSlice() 和 webkitSlice()。 无 论 浏 览 器 请 求 什么 名 称 ， 该 方法 都 会 
将 提取 的 数据 作为 新 的 blob 返 回 。Slice 是 blob API 人 允许 对 blob 原 始 数 据 
进行 的 唯一 的 访问 。 


如 果 一 个 blob 包 含 需要 加 载 的 数据 ， 即 使 是 一 个 网 址 ， 它 可 以 经 
过 变换 ， 通 过 createObjectURL() 方 法 作为 URL 使 用 。 这 将 返回 一 个 可 
以 分 配给 HTML 标 记 属 性 (该 标记 属性 需要 一 个 URL) 的 对 象 。 例 
如 ， 一 个 包含 图 像 数据 的 Blob 可 以 被 分 配给 一 个 <img> 标记 的 src 属 
性 来 显示 图 像 。 


当 它 是 一 个 URL 时 ， 手 动 释放 是 非常 重要 的 ， 因 为 JavaScript 无 法 
确定 什么 时 候 回收 该 对 象 。 要 做 到 这 一 点 ， 使 用 revokeBlobURL(U 方 
法 。Blob URL 与 创建 脚本 同 源 ， 因 此 它们 可 以 在 浏览 器 的 同 源 策略 可 
能 有 问题 的 地 方 灵 活 使 用 。 当 用 户 离开 该 页 面 时 ， 浏 览 器 也 将 撤销 所 
有 blob 的 URL 。 


操作 文件 


从 很 多 年 前 开始 ，HTML 表 单 束 能 够 包含 一 个 文件 类 型 将 其 作为 
表单 元 素 ， 并 人 允许 用 户 指 定 一 个 文件 上 传 到 服务 右 。 浏 贤 郁 不 允许 
JavaScript 设 置 这 一 表单 域 ， 因 为 担心 不 应 该 上 传 的 文件 可 能 会 以 某 种 
方式 被 强制 上 传 。 然 而 ， 新 的 JavaScript API 人 允许 从 已 经 被 用 户 添 加 到 
表单 元 素 中 的 本 地 系统 阅读 文件 的 内 容 。 


包含 文件 上 传 域 的 表单 将 提供 一 个 FileList 对 象 。FileList 对 象 的 每 
个 元 素 是 一 个 File 对 象 。 文 件 对 象 加 用 户 提 供 文 件 名 称 、MIME 类 型 、 
大 小 和 最 后 修改 日 期 。 完整 路 径 不 会 暴露 在 JavaScript 中 ， 但 是 可 以 在 
Firebug 中 看 到 。 


File 对 象 指 向 的 文件 可 以 被 FileReader 对 象 完整 读 取 或 者 使 
用 .slice0) 方 法 部 分 读 取 。 要 上 传 一 个 非常 大 的 文件 ， 例 如 视频 ， 需 要 
将 文件 分 割 成 较 小 的 部 分 并 分 部 上 传 到 服务 絮 ， 这 种 方法 可 能 比 上 传 
整个 文件 〈 可 能 有 几 百 兆 ) 更 好 。 还 应 当 注意 ， 在 默认 情况 下 ， 许 多 
服务 句 将 上 传 文件 的 大 小 限制 在 几 十 兆 。 


通过 使 用 FileReader 接 口 ， 程 序 可 以 读 取 该 文件 的 内 容 。 所 有 这 些 
方法 都 返回 void， 并 且 浏 览 器 通过 onload 处 理 范 数 将 文件 读 入 内 存 后 交 


付 该 数据 。 这 个 异步 操作 非常 重要 ， 因 为 将 一 个 很 大 的 文件 读 入 浏览 
器 可 能 要 花 一 些 时 间 。FileReader API 有 四 个 选项 用 于 读 取 文件 。 


FileReader.readDataAsURL() 


将 文件 转换 到 一 个 URL， 使 它 可 以 在 页 面 中 使 用 ， 由 此 产生 的 对 
象 将 包含 文件 的 完整 数据 。 


FileReader.readAsText() 


以 字符 串 形 式 返 回 数据 ， 默 认 情况 下 ， 返 回 的 数据 为 UTF-8 编 码 
的 文本 ， 也 可 以 指定 不 同 的 编码 格式 。 


FileReader.readAsBinaryString() 

以 二 进 制 字符 串 形 式 返 回 数 据 ， 不 对 内 容 进 行 解释 。 
FileReader.readAsArrayBuffer() 

以 一 个 ArrayBuffer 形 式 返回 数据 。 


例 6-2 展 示 了 一 个 拖 忠 处 理 画 数 的 例子 。 拖 中 处 理 将 在 本 草 后 面 
的 “ 拖 目 ”部 分 完整 介绍 。 对 于 本 例 需 要 明日 的 是 ，drop 是 一 个 传递 给 
addEventListener 的 回调 函数 的 名 字 ， 该 回调 函数 由 事件 处 理 程序 通过 
FileList 对 象 表单 中 的 文件 列表 进行 调用 。 列 表 中 的 第 一 个 文件 动态 创 
建 一 个 URL， 并 将 它 诡 加 到 一 个 <img> 标记 显示 在 浏览 郁 中 。 


例 6-2: 在 文档 中 追加 一 个 图 片 


var el=document.getElementById('dropzone' ); 
el.addEventListener('drop', function(evt){ 
var file=evt.dataTransfer.file[0]; 
file.readDataAsURL(); 
file.onload=function(img) 

{ 
$('div.images').append('<img>').attr({src: img}); 
}; 

}); 


Re Sia 


把 一 个 文件 从 桌面 拖 到 浏览 器 中 是 个 非常 好 的 功能 ， 但 是 如 果 不 
FETE CPF EER ce AS ARABS, BAAN HAA XMLHttpRequest 
接口 就 提供 了 上 传 到 服务 器 的 功能 。 通 过 使 用 FormData 接 口 ， 程 序 可 
以 包 奢 文件 并 将 它们 发 送 到 服务 器 。XHMLHttpRequest 还 提供 了 一 些 
回调 ， 可 以 给 用 户 提供 反馈 。onprogress 事 件 返 回 已 发 送 的 字 节 数 和 上 
传 的 总 大 小 ， 这 可 以 在 大 量 上 传 时 显示 进度 条 。 上 传 完成 时 ， 
onComplete 事 件 被 调用 。 


当 使 用 XMLHttpRequest 上 传 文件 时 ， 服 务 器 会 在 与 标准 表单 接口 
< input type='filemnultiple> 使 用 的 相同 接口 中 看 到 上 传 文件 。 因 此 ， 
此 服务 器 端 代码 应 该 是 与 文件 上 传 相 同 的 目 表单 元 聚 被 引入 以 来 一 直 
沿用 的 标准 代码 。 


例 6-3 展 示 了 用 Ajax 上 传 文件 的 示例 代码 。 它 使 用 formData 对 象 包 
装 要 发 送 到 服务 器 的 文件 。FormData 是 一 个 Java 对 象 ， 用 于 把 数据 打 
包 成 可 以 被 标准 HTTP 上 传 服务 上 传 的 文件 。 实 现 的 方法 是 把 文件 名 和 
文件 内 容 当 做 一 个 blob 传 递 给 FormData.append()， 然 后 用 XHR2 接 口 把 
FormData 对 象 作为 Ajax payload 发 送 到 服务 器 。 


例 6-3: 用 Ajax 上 传 文件 


function upload(files){ 

var uploadBlob=function uploadBlob( files, onload) { 
var xhr=new XMLHttpRequest ( ) ; 
xhr.open('POST', params.url, true); 
xhr.onload=onload; 

xhr.send( files); 

}; 

var formData=new FormData(); 
files.map(function( file) { 
formData.append(file.fileName, file); 
return file; 

}); 

uploadBlob(files,function(){ 
alert("Upload Finished"); 

}); 

} 


fie, Be 


HTML 5 已 经 增加 了 对 拖 息 的 文 持 。 现 在 可 以 把 一 个 或 多 个 文件 
从 桌面 拖 电 到 浏览 器 ， 并 用 JavaScript 访 问 这 些 文件 。 例 如 ， 它 可 以 被 
文件 管理 器 用 来 上 传 文件 到 服务 器 ， 或 者 被 图 形 程序 用 来 操作 图 像 。 
一 个 社交 网 络 站 点 可 以 允许 用 户 拖 暇 图片 到 浏览 器 中 进行 裁剪 、 缩 
放 、 旋 转 以 及 在 浏览 器 中 预览 ， 然 后 把 它们 上 传 到 服务 器 。 可 以 通过 
提供 较 小 的 图 像 节省 服务 器 资源 。 


注意 ;为 安全 起 见 ， 文 件 API 不 会 允许 上 传 目 隶 结 构 ， 而 只 是 一 
个 简单 的 文件 清单 。 当 然 ， 如 有 果 正 在 构建 一 个 文件 管理 器 ， 可 以 让 用 
户 上 传 一 个 压缩 文件 (ZIP、RAR、tar 等 ) 并 让 服务 器 打开 。 有 一 些 
库 可 以 用 于 多 数 流行 的 服务 人 磊 端 语言 中 解 讨 大 多 数 的 压缩 格式 。 


要 实现 拖 上 忠 ， 需 要 给 目标 DOM 元 素 的 drop 事 件 添加 一 个 监听 。 指 
定 的 事件 处 理 函 数 将 传递 一 个 参数 ， 其 中 有 一 个 请 单 包 含 了 被 拖 鼻 的 
所 有 文件 。 请 注意 ， 这 个 对 象 看 起 来 像 一 个 数组 ， 因 为 它 有 数字 键 和 
一 个 长 度 属性 。 然 而 ， 它 实际 上 不 是 一 个 数组 ， 试 图 对 它 调用 map 或 
任何 其 他 的 数组 操作 符 都 不 起 作用 。 


警告 ，Selenium 不 能 从 桌面 拖 动 文件 到 浏览 器， 因此 也 没有 办 法 
用 Selneium 自 动 测 试 拖 上 忠 。 


为 了 演示 本 章 介绍 的 特性 如 何 协同 工作 以 实现 一 个 方便 的 文件 处 
理 接口 。 例 6-4 把 这 些 全 部 放 入 一 个 更 完整 的 示例 中 ， 这 将 Web 页 面 上 
的 一 个 区 域 设计 为 拖 忠 区 。 当 用 户 把 一 个 文件 放 到 拖 踢 区 时 ， 它 将 被 
打包 到 FormData 对 象 ， 然 后 通过 XMLHttpRequest 对 象 上 传 。 这 个 函数 
还 显示 了 一 个 进度 指示 器 ， 将 上 传 的 进度 反馈 给 用 户 。 


例 6-4: 上 传 文件 


/*global$, FormData, alert, document, XMLHttpRequest*/ 
/*jslint onevar: false,white: false*/ 

(function(){ 

var toArray=function toArray(files) { 

var output=[ ]; 

for(var i=0, f; f=files[i]; i+=1){ 

output.push(fFf); 

} 


return output; 

}; 

var updateProgress=function(state) { 
var progress=$('progress#progress' ); 
progress.attr('max', 100); 
if(state==='start'){ 

return progress.fadeIn(500); 


else if(state==='stop'){ 
return progress. fadeOut (500); 


} 

// 使 用 jQuery UI 进度 条 

return progress.attr('value', state); 

}; 

var uploadBlob=function uploadBlob(params){ 
var xhr=new XMLHttpRequest (); 
xhr.open('POST', params.url, true); 


xhr.onload=params.success; 

// 监 听 上 传 进度 。 
xhr.upload.onprogress=params.progress; 
xhr.send(params.blob); 

return params; 

}; 

var fileupload=function fileupload(){ 
var el=document.getElementById('dropzone' ); 
var stopEvent=function(evt) { 
evt.stopPropagation(); 
evt.preventDefault(); 


el.addEventListener('dragover', stopEvent, false); 
el.addEventListener('drop', function(evt){ 
stopEvent(evt); 

var files=toArray(evt.dataTransfer.files); 
updateProgress('start'); 

var packageFiles=function( files) { 

var formData=new FormData(); 
files.map(function( file) { 
formData.append(file.fileName, file); 
return file; 

3); 

var block={ 

url: '/upload.php', 

success: function(){ 
updateProgress('done' ); 

}, 

progress: function(evt){ 
updateProgress(100*(evt.loaded/evt.total)); 
}, 

blob: formData 

}; 

return block; 

}; 

uploadBlob(packageFiles(files) ); 

}, false); 


}; 
// 运 行 设置 
fileupload(); 
}()); 


自 先 创建 钞 数 toArray， 它 把 所 有 文件 名 打包 成 一 个 数组 。 紧 接着 
的 updateProgess 函 数 使 用 一 个 HTML 5 提供 的 新 进度 条 ， 这 将 在 第 10 章 


的 “应 用 标记 ”一 节 介 绍 。uploadBlob 范 数 代 码 与 例 6-3 的 代码 一 样 ， 
fileupload 函 数 也 使 用 例 6-3 的 代码 ， 加 上 了 一 些 例 6-2 的 代码 。 


Filesystem 文 件 系统 


浏览 右 人 允许 JavaScript 访 问 文件 系统 的 想法 足以 让 任何 考虑 到 安全 
问题 的 人 陶 入 人 恕 懂 。 用 户 的 硬盘 驱动 右上 有 很 多 不 希望 浏览 器 访问 的 
东西 。 


GoogleChrome 人 允许 JavaScript 访 问 用 户 计 算 机 上 的 沙 箱 文件 系统 。 
如 果 想 从 网 页 内 运行 FileSystem API,Chrome 浏 览 器 必须 用 --unlimited- 
quota-for-files 标 记 启 动 。 不 过 ， 如 有 果 正 在 为 Google 的 网 上 商店 建立 一 
个 应 用 ， 那 么 可 以 通过 在 存储 清单 文件 中 指定 unlimitedStorage 访 问 这 
个 API。 


虽然 LocalStorage 和 IndexedDB 人 允许 JavaScript 程 序 在 数据 库 中 存储 
对 象 ， 但 是 FileSystem API 对 于 存储 大 型 二 进 制 对 象 非常 有 用 。 例 如 ， 
如 果 正 在 构建 一 个 视频 应 用 ， 在 文件 系统 上 处 理 图 像 可 能 会 对 存储 很 
有 用 。 其 他 用 例 可 以 包括 视频 流 、 具 有 很 多 媒体 资源 的 游戏 、 图 像 编 
辑 或 音频 应 用 。 总 之 ， 这 个 接口 将 适合 于 任何 需要 在 本 地 短期 或 长 期 
存储 大 量 数据 的 应 用 。 


TER: 由 于 文件 系统 API 只 在 Chrome 浏 览 器 中 文 持 ， 而 且 只 有 妆 
用 户 加 载 一 个 受信 任 的 应 用 时 才 文 持 ， 这 有 点 超出 了 本 书 的 范围 。 在 


«Using the HTML 5 Filesystem API) 一 书 中 可 以 找到 完整 的 相关 知 


识 。 


ZN 


第 7 章 ”离线 处 理 


近来 人 们 使 用 互联 网 似乎 一 直 很 通畅 ， 但 是 ， 坦 率 地 说 不 是 这 
样 。 在 有 些 时 候 和 有 些 地 方 ， 即 使 最 先进 的 移动 设备 也 会 出 于 这 样 或 
那样 的 原因 离开 网 络 的 柳 兰 范围。 


第 4 章 痢 上 腿 于 如 何 将 本 地 存储 的 数据 传递 给 浏览 右 ， 使 浏览 万 不 需 
要 访问 网 络 即 可 使 用 。 然 而 ， 如 条 没有 托管 应 用 的 Web 页 面 ， 再 方便 
的 数据 也 是 没有 用 的 。 


随 着 越 来 越 多 现代 的 应 用 进入 到 浏览 器 ， 能 够 随时 访问 该 软件 已 
经 变 得 至 关 重 要 。 问 题 是 ， 标 准 的 Web 应 用 假定 web 页面 将 要 加 载 许 
多 组 件 ， 包 括 JavaScript 源 代码 、HTML、 图 像 、CSS 等 。 为 了 用 户 能 
够 在 没有 接 入 互联 网 时 利用 这 些 资源 ， 需 要 在 本 地 存储 这 些 文件 的 副 
本 ， 在 需要 的 时 候 供 浏览 器 使 用 。HTML 5 让 程序 员 能 够 给 浏览 器 提 
供 一 个 要 加 载 和 保存 的 文件 清单 。 即 使 是 没有 网 络 连接 到 服务 器 ， 浏 
览 器 也 将 能 够 访问 这 些 文件 。 


即使 浏览 规 在 线 ， 清 单 中 列 出 的 文件 也 将 从 本 地 磁盘 加 载 。 从 而 
使 终端 用 户 体验 到 终极 内 容 交 付 网 络 。 


当 页 面 加 载 持 ， 只 要 浏 宽 器 在 线束 会 检查 服务 器 的 清单 文件 。 如 
果 清 单 文件 已 更 改 ， 浏 览 右 将 芝 试 重新 下 载 清 单 中 列 出 的 所 有 需要 下 


载 的 文件 。 一 旦 下 载 完 清单 中 的 所 有 文件 ， 浏 览 锅 将 更 新 文 件 缓存 以 
显示 新 的 文件 。 


清单 文件 商 介 


文件 离线 访问 是 由 Google 在 Gears 中 推出 的 一 项 功能 。 用 户 提供 了 
一 个 JSON 文 件 形 式 的 清单 ， 可 以 引导 浏览 郁 加 载 其 他 离线 请 求 的 文 
件 。 当 浏览 器 下 次 访问 该 网 页 时 ， 文 件 将 从 本 地 磁盘 加 载 ， 而 不 是 从 
网 络 加 载 。 当 清单 文件 的 版 本 字段 锌 更 新 时 ，Gears 会 检查 清单 中 所 有 
文件 进行 更 莉 * 


HTML 5 清单 的 想法 与 上 面 所 说 的 类 似 ， 但 在 实现 上 有 所 不 同 。 
它 的 一 个 好 处 是 ， 不 用 任何 JavaScript 代 码 就 可 以 在 应 用 中 实现 一 个 清 
单 ， 但 是 Gears 中 需要 用 JavaScript 代 码 实现 。 要 做 到 这 一 点 ， 需 要 在 文 
Ra <html> pric 〈 见 例 7-1) 中 增加 manifest 属 性 来 包含 清单 文件 的 
路 径 。 


例 7-1: HTML manifest 声 明 


< IDOCTYPE HTML > 
<html manifest="/cache.manifest"> 
<body> 


</body > 
</html> 


清单 文件 的 MIME 类 型 必须 为 text/cache-manifest。 可 以 通过 Web 服 
务 器 配置 文件 来 实现 。 设 置 Apache Web 服 务 器 的 MIME 类 型 ， 在 
Apache 的 配置 文件 中 添加 下 面 这 行 代码 。 对 于 其 他 Web 服 务 器 ， 请 参 
考 相关 服务 器 的 文档 。 文 件 的 名 称 并 不 重要 ， 只 要 文件 有 正确 的 
MIME 类 型 ， 但 是 cache.manifest 似 乎 是 一 个 很 好 的 默认 选择 。 


AddType text/cache-manifest.manifest 


清单 文件 的 结构 


清单 文件 的 格式 其 实 非 彰 侧 单 。 第 一 行 必须 是 "CACHE 
MANIFEST."。 之 后 是 一 个 文件 列表 ， 每 行 一 个 ， 包 含 在 清单 中 ( 见 
例 7-2) 。 注 释 可 以 用 井 号 (#) 标注 。 


该 清单 将 缓存 HTTP GET 请 求 ， 而 POST、PUT 和 DELETE 仍 需 访 
问 网 络 。 如 果 页 面 有 一 个 活动 的 清单 文件 ， 所 有 的 GET 请 求 都 将 被 定 
向 到 本 地 存储 。 但 对 于 某 些 文件 ， 离 线 访问 没有 意义 。 这 些 可 能 包括 
各 种 服务 右 资 源 ， 例 如 Ajax 调用 或 者 可 能 会 谥 出 缓存 区 的 大 型 文档 
集 。 这 些 文件 可 以 包含 在 清单 中 的 NETWORK 部 分 。 NETWORK 部 分 
的 所 有 URL 都 将 绕 过 缓存 直接 从 服务 器 加 载 。HTML 5 的 清单 要 求 任 
何 清单 中 未 包含 的 文件 选择 清单 以 外 的 办 法 。 冲 


在 其 他 情况 下 ， 可 能 希望 根据 用 户 是 否 在 线 提供 不 同 的 内 容 。 清 
单 为 每 个 资源 提供 了 一 个 FALLBACK 部 分 。 将 根据 浏览 器 是 否 连 接 到 
互联 网 ， 向 用 户 显示 不 同 的 内 容 。FALLBACK 部 分 的 每 一 行 的 第 一 个 
文件 用 于 当 连 接 可 用 时 从 服务 器 加 载 ， 第 二 个 文件 用 于 当 连 接 不 可 用 
时 从 本 地 加 载 。 


NETWORK 和 FALLBACK 部 分 都 是 列 出 文件 模式 ， 而 不 是 具体 的 
文件 。 因 此 可 以 在 这 里 列 出 整个 目录 或 URL 路 径 以 及 文件 类 型 ， 如 


像 (* jpg) 9 
例 7-2: 清单 文件 


CACHE MANIFEST 

#2010-10-11 

/index.php 

/js/jquery.js 

/css/style.css 
/images/logo.png 

NETWORK: 

/request.php 

FALLBACK: 

/about .html/offline-about .html 


[1] HTML 5 中 ， 对 于 清单 中 未 包含 的 文件 ， 当 用 户 离线 时 不 加 载 ， 在 
线 时 从 服务 器 加 载 。 


更 新 清单 


清单 文件 本 喘 一 经 改变 ， 浏 贤 右 束 会 更 新 清单 中 的 文件 。 有 几 种 
方式 用 来 处 理 这 个 问题 。 可 以 在 文件 的 注释 中 增加 一 个 版 本 号 。 如 果 
项 目 使 用 了 一 个 与 Subversion 类 似 的 版 本 控制 ， 则 可 以 使 用 版 本 号 标记 


来 解决 这 个 问题 。 


用 版 本 控制 系统 中 的 版 本 号 有 一 个 问题 ,每 当 系统 中 的 任意 文件 
发 生变 化 时 ， 程 序 员 都 得 记 着 更 新 文件 。 创 建 一 个 目 动 系统 ， 并 作为 
部 车 过 程 的 一 部 分 运行 该 脚本 要 好 得 多 。 只 要 清单 中 列 出 的 文件 有 变 
化 束 会 目 动 更 新 清单 文件 。 


例如 ， 可 以 写 一 个 脚本 ， 检 查 清单 中 所 有 文件 的 变化 ， 然 后 当 其 
中 一 个 文件 变化 时 对 清单 文件 本 号 进 行 修 改 。 一 个 简单 的 方法 是 写 一 
个 脚本 ， 对 清单 中 的 所 有 文件 进行 循环 ， 然 后 对 每 一 个 做 MD5 校 验 ， 
再 将 最 后 的 校 验 放 入 manifest 文 件 。 这 将 确保 任何 更 改 都 会 引发 清单 文 
(Fat 


该 脚本 可 能 会 太 慢 而 不 能 从 Web 服 务 右 运行 ， 因 为 要 在 1s 内 运行 
数 百 次 很 困难 。 但 是 ， 它 可 以 有 效 地 运行 在 开发 环境 中 ， 可 以 选择 当 
文件 保存 时 从 编辑 器 中 运行 ， 或 者 作为 版 本 控制 系统 中 检查 过 程 的 一 


部 分 运行 。 


在 例 7-3 中 ， 对 清单 文件 进行 解析 ， 并 用 它 做 一 些 事情 。 该 程序 用 
Symfony Yaml Library (http://components.symfony-project.org/yaml) 类 
库 加 载 文件 列表 作为 清单 使 用 。 另 外 ， 该 程序 首先 检查 有 没有 文件 重 
复 加 入 。 还 会 检查 每 一 个 文件 是 否 存在 ， 缺 少 文 件 会 破坏 清单 。 脚 本 
通过 用 注释 在 文件 名 后 面 添加 每 个 文件 的 MD5， 确 保 任何 文件 的 更 新 
都 会 引发 清单 文件 的 变化 ， 以 便 浏 览 右 更 新 其 内 容 。 数 据 文件 格式 如 
例 7-5 所 示 。 例 7-3 将 输出 一 个 清音 文件， 文件 中 包含 一 个 MD5 Hash 作 
为 注释 ， 见 例 7-4。 


例 7-3: 目 动 更 新 清单 文件 


<?php 

header('Content-Type: text/cache-manifest'); 
echo("CACHE MANIFEST\n"); 

$files=sfYaml: load('manifest.yml1' ); 
$hashes=''; 

$files=unique($files); 
foreach($files->cache as$file) 


{ 
if(file_exists($file) ) 
{ 

echo$file."\n"; 


$hashes.=md5_file($file); 
} 


} 
echo"\nNETWORK: \n" 
foreach($files- >network as$file) 


{ 
echo$file."\n"; 


} 
echo"\nFALLBACK: \n" 
foreach($files->fallback as$file) 


{ 
echo$file."\n"; 


} 
echo"#HASH: ".md5($hashes)."\n"; 


例 7-4: 包括 MD5 Hash 的 清单 


CACHE MANIFEST 

index.html 

css/style.js 

js/jquery.js 

js/myscript.js 

NETWORK: 

network/file 

FALLBACK: 
/avatars//offline-avatars/offline.png 
#HASH: 090c7e8fe42c16777fFba844F835e839b 


例 7-5: 例 7-3 的 数据 


files: 

-index.html 

-css/style.css 

-js/jquery.js 

-js/myscript.js 

network: 

-network/file 

faillback: 
-/avatars//offline-avatars/offline. png 


警告 ， 当 以 为 清单 应 该 非常 好 地 更 新 时 候 ， 它 不 一 定 总 是 很 好 。 
即使 有 一 个 清单 的 新 版 本 ， 可 以 经 常 花 一 些 时 间 来 更 新 浏览 器 中 的 内 
容 。 除 非 设置 缓存 控制 头 ， 否 则 浏览 器 要 在 最 后 下 载 完 几 个 小 时 后 才 
会 再 次 下 载 清单 。 例 如 ， 确 保 缓 存 控制 头 不 会 导致 浏览 器 每 隔 五 年 才 
下 载 文件 或 使 用 ETag 头 ， 或 者 将 服务 器 设置 为 没有 缓存 头 ， 一 定 要 测 
试 好 。 


Br 


浏览 絮 通 过 清单 文件 加 载 页 面 时 ， 会 在 window.applicationCache 对 
象 上 触发 一 个 检查 事件 。 此 事件 将 检查 该 页 面 之 前 是 否 已 被 访问 过 。 


如 果 绥 存 之 前 尚未 下 载 ， 浏 览 絮 就 会 触发 一 个 downloading 事 件 ， 
并 开始 下 载 文件 。 如 果 清 单 文件 发 生 改 变 此 事件 也 会 触发 。 如 果 清 单 
中 没有 变化 ， 浏览 右 将 触发 noupdate 事 件 


当 浏 览 套 下 载 文件 时 ， 会 引发 一 系列 progress 事 件 。 如 有 果 想 要 回 用 
尸 提 供 某 种 形式 反馈 ， 让 用 户 知 道 软件 正在 下 载 ， 可 以 使 用 这 些 事 
人 


一 旦 下 载 完 所 有 文件 ， 就 会 触发 cached 事 件 。 


如 有 条 出 现任 何 错误 ， 浏 览 右 将 触发 arror 事 件 。 这 可 能 是 由 有 问题 

的 HTML 页 面 、 有 缺陷 的 请 单 、 下 载 失败 或 者 请 单 中 列 出 的 任何 资源 
下 载 失败 造成 的 。 如 采 清 单 中 一 个 文件 缺少 ， 则 请 单 中 的 任何 文件 都 
`\ 会 下 载 。 当 清单 正在 改变 的 情况 下 ， 如 果 有 一 个 坏 连接 ， 该 文件 的 
旧版 本 将 被 保留 。 在 新 清单 中 浏览 右 可 能 直接 忽略 该 清单 。 然 而 ， 可 
能 不 是 所 有 的 浏览 絮 或 浏览 器 版 本 部 在 这 一 点 上 保持 一 怪 。 用 目 动 测 
试验 证 清单 中 的 所 有 URL 是 一 个 好 主意 。 对 缓存 来 说 ， 这 可 能 是 一 个 
非常 严重 的 错误 ， 因 为 几乎 没有 可 见 的 证 据 证 明 什么 地 方 出 了 错 。 捕 


捉 错 误 对 和 象 并 呈现 给 用 户 ， 作 为 对 坏 链 接 目 动 测 试 的 某 种 形式 古 不 错 
的 想法 。 


在 GoogleChrome 浏 唤 絮 中 ， 开 发 人 员工 具 可 以 显示 清单 中 的 文件 
列表 〈 见 图 7-1) 。 在 "Storage" 选 项 卡 下 的 "Application Cache" 子 项 将 显 
示 各 项 目的 状态 。 
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7-1 ” Chrome 存储 查看 器 


Eza 


a: 在 开发 过 程 中 关闭 请 单 文件 ， 只 有 当 项 目 准 备 使 用 时 才 局 
是 个 不 错 的 想法 。 如 果 变 化 不 能 快速 出 现 ， 使 用 缓存 会 使 应 用 


4 
Me 


非常 难以 开发 。 


Dalia ACHE 

清单 文件 向 特殊 的 调试 提出 了 挑战 。 它 可 能 是 几 种 特殊 类 型 错误 
的 来 源 。 

第 一 个 最 明显 的 错误 是 在 清单 中 包括 不 存在 的 文件 。 如 果 一 个 广 


件 被 包含 在 页 面 中 但 是 在 清单 中 没有 ， 它 将 不 会 被 页 面 加 载 ， 同 样 ， 
服务 器 上 缺少 的 文件 也 不 会 被 下 载 。 


许多 Selenium 测 试 不 会 明确 地 测试 正确 的 样式 和 显示 的 图 片 ， 
此 很 可 能 一 个 缺少 CSS 文 件 或 图 片 的 应 用 在 某 种 程度 上 仍然 可 以 工 
作 ， 它 通常 古 在 Selenium 中 测试 的 。 在 一 个 包括 来 目 外 部 Web 服 务 右 
资源 的 应 用 中 ， 这 些 也 必须 在 清单 文件 的 日 名 单 中 列 出 。 


在 一 些 浏 览 絮 中 ， 包 括 Firefox， 出 现 了 进一步 的 问题 ， 这 些 浏览 
器 中 清单 具有 了 选择 功能 。 因 此 Selenium 测 试 可 能 不 会 选择 它 ， 这 将 
使 整个 测试 失去 实际 意义 。 为 了 在 Firefox 中 测试 ， 有 必要 建立 一 个 应 
用 缓存 可 以 默认 使 用 的 Firefox 配 置 文件 。 步 又 如 下 ; 


1. 完 全 退出 Firefox ° 


2. 从 命令 行 用 -profileManager 切 换 启 动 Firefox。 这 样 会 出 现 一 个 如 
图 7-2 所 示 的 对 话 框 。 保 存 目 定 义 配置 文件 。 


Firefox - Choose User Profile 


7-2 ”Firefox 自 定义 配置 对 话 框 


3. 重 新 启动 Firefox。 转 到 Firefox 的 选项 菜单 ， 选 择 "Advanced" 选 项 
卡 ， 在 下 面 选 择 "Network" 选 项 卡 〈 见 图 7-3) ， 然 后 关闭 “ 当 一 个 网 站 
要 求 存储 数据 离线 使 用 时 ， 人 告诉 我 ?选项 。 


7-3 Firefox 选项 


现在 ， 当 启动 Selenium RC 服务 器 时 ， 使 用 此 选项 : 


java-jar selenium-server.jar-firefoxProfileTemplate 


Firefoxi E CFA 6240 A WAG: 
http://support.mozilla.com/en-US/kb/Managing+profiles ° 
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常情 况 下 ， 会 在 加 载 页 面 后 伦 费 一 两 分 钟 的 时 间 让 浏览 器 更 新 文件 绥 
存 ， 并 且 直 到 页 面 加 载 完 成 浏览 万 才 会 检查 缓存 。 因 此 ， 如 采 服 务 天 
被 更 新 ， 浏 贤 郁 在 用 户 访问 该 页 面 之 前 将 不 会 有 痢 的 版 本 。 如 果 在 服 
务 器 上 已 经 有 了 一 个 更 新 ， 束 会 引起 问题 ， 会 导致 浏 览 器 中 的 应 用 失 
败 ， 例 如 Ajax 协 议 的 变化 。 


当 用 户 访问 该 页 面 时 (当然 假设 该 浏览 器 在 线 ” ， 浏 览 器 会 从 服 
务 器 上 获取 清单 文件 。 但 是 ， 如 采 清 单 文件 中 设置 了 一 个 缓存 控制 
头 ， 浏 览 逢 可 以 不 检查 清单 的 新 版 本 。 例 如， 如 果 文 件 中 有 一 个 头 ， 
声明 浏 咒 器 应 该 一 年 只 检查 一 次 更 新 (Web 服 务 器 上 有 了 时 很 常见 ) ， 
浏览 句 将 不 会 重 狐 载 入 清单 文件 。 所 以 确保 清单 文件 本 号 不 被 浏览 秦 
缓存 是 非常 重要 的 ， 或 者 如 打 它 被 缓存 了 也 只 能 通过 一 个 ETag 来 实 
现 。 


浏览 絮 可 以 通过 给 URL 附 加 一 个 查询 字符 串 cache.manifest?load=1 
以 阻止 缓存 清单 文件 。 如 果 清 单 文 件 是 一 个 静态 的 文本 文件 ， 查 询 字 


符 串 将 被 忽略 ， 但 浏 咒 器 不 知道 ， 浏 览 絮 将 要 求 服 务 絮 发 送 一 个 狐 的 
副本 。 


不 同 的 Web 浏 宽 器 甚至 一 个 浏览 器 的 不 同 版 本 对 清单 文件 的 更 狐 
都 会 有 所 不 同 。 因 此 在 使 用 一 个 清单 文件 时 ， 非 常 仔细 地 对 任意 应 用 
进行 跨 不 同 浏 览 需 和 浏览 套 版 本 测试 是 非常 重要 的 。 


eee ”把 工作 分 割 成 Web Worker 


JavaScript 目 有 史 以 来 一 直 以 单线 程 运 行 。 这 对 小 应 用 是 可 行 的 ， 
但 现在 随 着 应 用 越 来 越 大 ， 它 变 得 很 局 限 。 随 着 运行 的 JavaScript 越 来 
越 多 ， 应 用 开始 阻塞 等 待 代码 执行 完成 。 


JavaScript 从 一 个 事件 循环 运行 代码 ， 该 循环 从 浏览 絮 中 已 发 生 的 
所 有 事件 队列 中 提取 事件 。 一 旦 JavaScript 运 行 时 闲置 下 来 ， 就 会 取出 
队列 中 的 第 一 个 事件 ， 并 执行 响应 该 事件 的 处 理 程序 ( 见 图 8-1) 。 只 
要 这 些 处 理 程序 快速 运行 ， 束 能 制造 出 应 管 的 用 户 体 验 。 


Events 


=e) 


8-1 事件 循环 


在 过 去 的 儿 年 中 ， 浏 览 右 之 间 的 竞争 一 直 围 绕 着 JavaScript 的 速 
度 。 在 Chrome 和 Firefox 中 ，JavaScript 现 在 的 运行 速度 要 比 以 前 它 在 
IE6 中 的 速度 快 多 达 一 百倍 。 因 此 ， 它 可 以 在 事件 循环 中 加 入 更 多 代 
fH o 


值得 庆幸 的 是 ，JavaScript 做 大 多 数 事情 的 速度 都 很 快 。 往 往 是 按 
顺序 操纵 一 些 数据 ， 并 传递 给 DOM 或 进行 Ajax 调用 。 所 以 图 8-1 的 模 
型 工作 得 很 好 。 对 于 那些 需要 花费 比 几 分 之 一 秒 更 长 的 时 间 计 算 的 事 
情 ， 有 一 些 技巧 可 以 防止 计算 瓶颈 影响 用 户 体验 。 


一 个 主要 的 技 马 是 把 计算 分 割 成 多 个 小 步 又 ， 并 在 队列 中 将 每 个 
步骤 作为 独立 的 工作 运行 。 每 一 步 随 着 下 一 个 步骤 的 调用 而 结束 ， 其 
间 进 行 短暂 延迟 《1/100s) 。 这 可 以 防止 任务 锁定 事件 队列 。 但 是 因 
为 它 将 任务 调度 的 工作 留 给 了 程序 员 ， 而 有 效 地 实现 这 个 解决 方案 也 
需要 付出 很 大 的 努力 ， 因 此 仍然 从 根本 上 不 合格 。 


如 打 时 间 步 长 太 短 ， 计 算 可 能 仍 会 墙 塞 事件 队列 ， 并 导致 其 他 任 
务 延 后 。 虽 然 任 务 仍然 会 发 生 ， 但 是 因为 系统 没有 马上 回应 点击 和 其 
他 用 户 可 见 的 行为 ， 用 户 会 感觉 到 滞后 。 男 一 方面 ， 如 果 行 动 之 间 的 
步骤 太 大 ， 计 算 将 需要 很 长 的 时 间 来 完成 ， 导 致 用 户 需要 等 竺 结 末 返 
回 o 


GoogleGears 创 建 了 “Worker 池 ”的 思路 ， 现 在 已 经 转化 成 HTML 5 
Web Worker。 接 口 有 所 不 同 ， 但 基本 思路 相同 。 一 个 Worker 是 一 个 单 
独 的 JavaScript 程 序 ， 可 以 执行 计算 、 回 传 信息 并 往返 于 主 程序 和 其 他 
Worker 之 间 。Web Worker 不 同 于 Java 或 Python 中 的 线程 ， 设 计 的 一 个 
关键 方面 是 : 没有 共享 的 状态 。Worker 和 主要 的 JavaScript 实 例 只 能 通 
过 传递 消 忆 进 行 通信 。 


这 一 区 别 导 致 一 些 关 键 的 编程 实践 大 多 比 线程 编程 简单 。Web 
Worker 不 需要 互 不 、 锁 定 或 同步 ， 不 会 出 现 死 锁 和 苋 争 条 件 。 这 也 意 
味 着 可 以 使 用 大 量 的 JavaScript 包 ， 不 用 担心 它们 有 是否 是 线程 安全 的 。 
浏览 硕 的 JavaScript 环 境 唯 一 的 变化 是 一 些 新 的 方法 和 事件 。 


每 个 Worker (包括 主 窗口 ) 维持 一 个 独立 的 事件 循环 。 每 当 没 有 
代码 运行 时 ，JavaScript 运 行 时 返回 到 事件 循环 。 这 时 运行 时 将 取出 队 
列 中 的 第 一 条 消息 。 如 有 果 队 列 中 没有 事件 ， 它 会 等 每 ， 直 到 一 个 事件 
到 达 ， 然 后 处 理 它 。 如 采 某 些 代码 正在 长 时 间 运 行 ， 将 一 直到 这 段 代 
码 完成 后 才 会 处 理事 件 。 


这 将 在 主 窗口 中 导致 浏览 器 的 用 户 界 面 锁定 。 《有 些 浏览 器 提供 
将 JavaScript 停 止 在 这 一 点 上 的 文 持 。) 在 一 个 Worker 中 ， 一 个 较 长 的 
任务 将 阻止 Worker 接 收 任何 新 的 事件 。 但 主 窗口 和 任何 其 他 Worker 将 
继续 啊 应 。 


然而 ， 这 种 设计 的 选择 给 Worker 进 程 本 身 附 加 了 一 些 约束 。 首 
完 ，Worker 没 有 访问 DOM 的 权限 。 这 也 意味 着 当 Firebug 人 与 JavaScript 
通过 DOM 通 信和 有时，Worker 不 能 使 用 Firebug 的 控制 台 界 面 。 最 后 ， 
JavaScript 调 斌 妖 不 能 访问 Worker， 因 此 没有 办 法 逐步 调试 代码 或 者 做 
那些 调试 器 中 通常 能 完成 的 其 他 事情 。 


Web Worker 用 例 


在 网 络 上 运行 的 各 类 传统 应 用 程序 以 及 网 页 浏览 锅 环 境 的 限制 ， 
限制 了 调用 Web Worker 的 计算 需求 。 直 到 最 近 ， 大 多 数 Web 应 用 程序 
能 操纵 少量 的 数据 ， 主 要 包括 文字 和 数字 。 在 这 些 情况 下 ， 有 限 地 使 
用 Web Worker 的 构造 类 型 。 现 在 ，JavaScript 被 要 求 做 更 多 的 事情 ， 许 
多 闻 见 的 情况 可 以 从 索 衍 的 新 任务 中 受 花 。 


图 像 


HTML 5 的 <svg> 和 < canvas> 的 标记 人 允许 JavaScript 操 作 图 像 ， 
图 像 处 理 是 一 个 潜在 的 繁重 的 计算 任务 。 虽 然 自 1993 年 Mosaic 浏 览 器 
发 布 以 来 ，Web 浏 览 器 已 经 能 够 显示 图 像 ， 但 是 浏览 器 依旧 无 法 操作 
这 些 图 像 。 如 果 一 个 web 程 序 员 想 取 一 个 图 像 进行 扭曲 、 透 明王 加 
等 ， 不 能 在 浏览 器 中 进行 。 在 <img > 标记 中 ， 所 有 的 浏览 器 可 以 做 
的 只 有 通过 改变 src 属 性 蔡 换 一 个 不 同 的 图 像 ， 或 改变 显示 图 像 的 大 
小 。 然 而 ， 浏 览 器 没有 办 法 知道 图 像 是 什么 ， 或 访问 组 成 图 像 的 元 数 
据 。 


最 近 加 入 的 <canvas> 标记 将 一 个 已 有 的 图 像 导 入 到 画布 上 ， 并 
将 元 数据 导出 到 JavaScript 中 处 理 ， 只 要 图 片 是 从 页 面 所 在 的 同一 台 服 
务 器 上 加 载 的 ， 也 可 以 从 HTML 5<video> 标记 的 一 个 视频 中 导出 一 
ii o 


从 图 形 中 提取 出 数据 ， 可 以 把 它 传递 给 一 个 Worker 进 行 处 理 。 这 
可 用 于 做 任何 事情 ， 从 清理 图 像 到 对 科学 数据 集 做 传 里 叶 变 换 。 
Canvas 使 得 构建 复 洒 图 片 ， 通 过 各 种 用 JavaScript 编 写 的 过 滤 右 编辑 成 
为 可 能 ， 应 该 经 常 使 用 Web Worker 以 获得 更 好 的 性 能 。 


[1] HTML 5 图 像 的 更 多 信息 参见 《HTML 5 Canvas》， 作 者 Steve 


Fulton 和 Jeff Fulton (O'Reilly) 


地 图 


除了 图 形 以 外 ，JavaScript 现 在 还 有 可 以 用 于 处 理 地 图 数据 的 
API。 可 以 从 互联 网 导入 地 图 ， 并 找 出 用 户 的 当前 位 置 ， 通 过 地 理 信 
居 可 以 实现 广泛 的 网 络 应 用 服务 。 


假设 在 移动 浏览 絮 中 构建 了 一 个 路 线 查 找 应 用 。 拿 出 电话 ， 告 诉 
它 想 要 去 “特拉维夫 国王 乔治 大 街 14 号 ”>， 然 后 让 浏览 器 找 出 你 所 在 的 
位 置 ， 指 出 到 最 近 公 共 汽 车 站 的 路 线 ， 并 告诉 你 应 该 从 拉 马 特 甘 的 钻 
石 区 乘 82 路 公交 后 到 达 那 里 ， 应 该 是 不 错 的 体验 。 


该 软件 更 复杂 的 版 本 可 以 检查 交通 状况 ， 告 诉 你 一 个 不 同 的 公交 
车 ， 虽 然 可 能 走 绕 远 一 点 的 路 线 ， 而 且 离 目 的 还 有 一 段 距离 需要 步 
行 ， 但 可 能 会 更 快 到 达 ， 因 为 错开 了 主要 交通 拥 墙 。 


使 用 Web Worker 


要 启动 一 个 Web Worker， 创 建 一 个 新 的 Worker 对 象 ， 并 传递 包含 
该 代码 的 文件 作为 调用 的 参数 〈 见 例 8-1) 。 下 面 的 代码 将 从 源 文件 创 
建 一 个 Worker ° 


例 8-1: Worker 示 例 


$(document ).ready(function(){ 

var worker=new Worker('worker.js'); 
worker .onmessage=function(event ) { 
console.info(event ) ; 


worker .postMessage("World"); 


}); 


浏览 右 加 载 该 Worker， 运 行 所 有 不 在 事件 处 理 程序 中 的 代码 ， 然 
后 局 动 事件 循环 等 竺 事件。 要 关注 的 主要 事件 是 message 事 件 ， 它 定义 
了 发 送 数 据 到 worker 的 方法 。 主 线程 通过 调用 postMessage 芳 数 发 送 
message 事 件 ， 将 传送 的 数据 作为 参数 。 


来 自主 线程 的 数据 保存 在 event.data 字 段 中 。Worker 以 Message() 方 
法 读 取 这 些 数 据 。 


Worker 环 境 


Web Worker 运 行 在 一 个 非常 小 的 环境 中 。 缺 少许 多 浏览 器 中 熟悉 
的 对 象 和 JavaScript 接 口 ， 包 括 DOM、 文 档 对 象 、 窗 口 对 象 。 


除了 标准 ECMA 脚 本 对 象 外 ， 如 字 String、Array 和 Date， 还 有 下 
列 对 象 和 接口 对 Web Worker 可 用 : 


.navigator 对 象 包含 四 个 属性 : appName、appVersion、userAgent 和 


platform ° 
location 对 象 的 所 有 属性 为 只 读 。 
self xX} Rize Workerr} RAF ° 
-importScripts() Ù YË ° 
.XMLHttpRequest 接 口 用 于 Ajax 方法 。 
“setTimeout() 和 和 setInterval()° 
close() 方 法 用 于 结束 worker 进 程 。 


也 可 以 使 用 ECMAScript5 JSON 接 口 ， 因 为 它们 是 语言 的 一 部 分 而 
不 是 浏览 器 的 一 部 分 。 此 外 ，Worker 可 以 用 importScripts() 方 法 从 服务 
名 导 入 库 脚本 。 该 方法 的 参数 为 要 加 载 的 一 个 或 多 个 文件 列表 ， 与 主 
用 户 界 面 线程 中 使 用 的 < script> 标 记 具 有 相同 的 效果 。 与 JavaScript 中 
的 大 多 数 方法 不 同 ，importScripts 是 阻塞 式 的 ， 直 到 列 出 的 所 有 脚本 加 


载 完 成 后 该 男 数 才 会 返回 。importScripts 将 根据 指定 的 命令 顺序 执行 加 
载 的 文件 。 


虽然 1ocalStorage 和 sessionStorage 不 能 从 Web Worker 访 问 ， 但 是 
IndexedDB 数 据 库 可 以 〈 见 第 5 章 ) 。 此 外 ，IdexedDB 规 范 规定 可 以 
在 Web Worker 中 〈 而 不 是 在 主 窗口 中 ) 使 用 阻塞 调用 表单 。 因 此 ， 在 
Worker 使 用 IndexedDB 操 作 数 据 的 情况 下 ， 把 新 的 数据 加 载 到 数据 库 
中 ， 然 后 发 送 一 个 "updated" 消 息 到 主 窗 口 或 其 他 Worker， 让 它们 知道 
以 便 采 取 任 何必 要 的 行动 。 


Worker 通 信 


Worker 相 关 的 主要 事件 是 message 事 件 ， 从 主要 JavaScript 环 境 中 的 
postMessage 方 法 癌 Worker 发 送 传递 信息 。 在 Firefox 中 ， 可 以 传递 复杂 
的 JavaScript 对 象 。 然 而 ， 有 些 版 本 的 Chrome 和 Safari 只 支持 简单 的 数 
据 ， 如 字符 串 、 布 尔 和 数字 。 一 个 很 好 的 思路 是 将 所 有 数据 编码 成 
JSON， 再 发 送 到 一 个 Web Worker ° 


Worker 可 以 通过 同一 个 postMessage 方 法 将 数据 发 送 回 主线 程 。 通 
过 workeronmessage 处 理 程序 接收 回 主线 程 。 


Worker 的 通信 模型 是 创建 Worker 的 主要 任务 ， 然 后 来 回 传递 消 
已 ， 如 图 8-2 所 示 。 


Create worker 


8-2 Worker 通信 


Web Worker 碎 形 示例 


例 8-1 是 Web Worker 的 "Hello World" 示 例 ， 它 调用 了 一 个 更 为 复杂 
的 例子 。 图 8-3 显 示 了 一 个 Web Worker 中 计算 的 Mandelbrot 集 的 视觉 效 
果 。 这 里 ， 该 Worker 和 主线 程 对 工作 进行 了 分 割 以 绘制 碎 形 。Worker 
完成 了 Mandelbrot 集 的 实际 计算 工作 ， 而 前 端 脚本 则 获取 原始 数据 ， 
并 显示 在 画布 上 。 


8-3 ”Mandelbrot 示 例 


前 端 脚本 ( 见 例 8-2) 创建 canvas 元 素 ， 并 进行 缩放 使 其 适合 页 
面 。 然 后 ， 创 建 一 个 对 象 包装 Worker 接 口 。 包 装 器 对 象 在 包装 器 的 
run0 方 法 中 创建 Worker， 传 递 给 Worker 一 个 参数 块 ， 告 诉 它 要 计算 哪 
一 块 Mandelbrot 集 。 


draw 方 法 提取 数据 ， 进 行 缩放 使 它 适合 画布 大 小 ， 设 置 一 种 颜 
色 ， 然 后 绘制 像素 。 


注意 : HTML Canvas 没 有 绘制 像素 的 命令 ， 因 此 要 绘制 一 个 像 
素 ， 必 须 绘制 一 个 大 小 为 1 的 方块 ， 并 且 从 目标 显示 位 置 偏 移 半 个 像 
素 。 因 此 ， 要 在 (20，20) 点 处 绘制 一 个 像素 ， 它 应 该 是 在 (19.5, 
19.5) ~ (20.5, 20.5) 。 在 画布 网 格 上 的 位 置 不 是 屏幕 上 的 像素 ， 而 
是 在 它们 之 间 的 点 。 


然后 onMessage 处 理 程序 ， 等 待 要 从 Worker 发 送 的 事件 。 如 果 事 件 
类 型 是 draw， 处 理 程序 将 调用 该 方法 在 画布 上 绘制 新 的 数据 。 如 果 事 
件 是 log， 通 过 console.info() 记 录 到 JavaScript 控 制 台 。 为 记录 Worker 的 
状态 信息 提供 了 一 个 非常 简单 的 方法 。 


startWorker 将 this 赋 值 给 一 个 局 部 变量 ， 别 名 为 that。 这 是 因为 this 
不 像 其 他 的 JavaScript 变 量 受 语法 作用 域 限 制 。 要 让 内 部 函数 访问 需要 
绘制 一 个 像素 的 对 象 ， 有 必要 将 它 的 别名 命名 为 一 个 语法 作用 域内 的 


变量 。 按 照 惯例 ， 该 变量 通常 被 命名 为 that 。 
例 8-2: Mandelbrot 前 端 


var drawMandelSet=function drawMandelSet(){ 
var mandelPanel=$('body' ); 

var width=mandelPanel.innerWidtnh(); 

var height=mandelPanel.innerHeight( ); 

var range=[{ 


$('canvas#fractal').height(height+100); 
$('canvas#fractal').width(width-50); 

var left=0; 

var top=0; 

var canvas=$("canvas#fractal") [0]; 

var ctx=canvas.getContext("2d"); 

var params={ 

range: range, 

startx: 0.0, 

starty: 0.0, 

width: width, 

height: height 

+ 

var y_array=[]; 

var worker={ 

params: params, 

draw: function draw(data){ 
data.forEach(function d(point){ 
if(this.axis.x[point.drawLoc.x]===undefined) { 
this.axis.x[point.drawLoc.x]=point.point.x; 


if(this.axis.y[height-point .drawLoc.y]===undefined) { 
this.axis.y[height-point.drawLoc.y]=point.point.y; 


ctx.fillStyle=pickColor(point.escapeValue) ; 
ctx. fillRect(point.drawLoc.x+0.5, 
height-point.drawLoc.y+0.5, 1, 1); 


}, this); 
}. 

axis: { 
X: i ， 

y: [], 


find: function(x,y){ 

return new Complex(this.x[x], this.y[y]); 
}, 

reset: function(){ 

this.x=[], this.y=[]; 

} 

}, 

myWorker: false, 

run: function startWorker (params) { 

this .myWorker=new Worker("js/worker.js"); 
var that=this; 

this .myWorker.postMessage(JSON.stringify(params) ); 
this .myWorker .onmessage=function(event ) { 
var data=JSON.parse(event.data); 

if (data. type==='draw'){ 

that .draw(JSON.parse(data.data) ); 


} 


else 
if(event.data.type==='log'){ 
console.info(event ) ; 

} 

}; 

} 

}; 

worker.run(params); 

return worker; 

}; 

$(document).ready(drawMandelSet ); 
Function.prototype.createDelegate=function createDelegate( scope) 


var fn=this; 

return function(){ 

fn.call( scope, arguments); 

}; 

}; 

function pickColor(escapeValue) { 

if (escapeValue===Complex.prototype.max_iteration) { 
return"black"; 

} 

var tone=255-escapeValue*10; 

var colorCss="rgb({r}, {g}, {b})".populate({ 
r: tone, 


}); 
return colorcCss; 


} 
String.prototype.populate=function populate(params) { 


var str=this.replace(/\{\w+\}/g, function stringFormatInner (word) 
return params[word.substr(1, word.length-2)]; 


}); 


return str; 


}; 


Worker 本 身 实际 很 简单 ( 见 例 8-3) 。 它 只 是 加 载 了 其 他 一些 文 
件 ， 然 后 等 待 一 个 从 用 户 界面 发 来 的 消息 。 当 收 到 一 个 消息 时 ， 开 始 
计算 。 


例 8-3: Mandelbrot 计 算 


importScripts('function.js', 'json2.js', 'complex.js', 'computeMa 
ndelbrot.js', 

'puildMaster.js'); 

onmessage=function(event ) { 

var data=typeof event.data==='string'?JSON.parse(event.data): 
event.data; 

buildMaster (data); 


}; 


生成 函数 ( 见 例 8-4) 对 Mandelbrot 集 合 中 的 点 网 格 进行 循环 ， 计 
算 每 个 点 的 转 义 值 〈 见 例 8-5) 。 每 计算 200 点 后 ， 生 成 函数 发 送 其 计 
算 结果 到 主线 程 进行 绘图 ， 然 后 归 零 其 计算 点 的 内 部 缓冲 区 。 此 方式 
不 是 等 得 整个 网 格 一 次 性 绘制 ， 用 户 能 看 到 图 像 逐 步 生 成 。 


例 8-4: Mandelbrot 生 成 


var chunkSize=200; 

function buildMaster (data) { 

var range=data.range; 

var width=data.width; 

var height=data.height; 

var startx=data.startx; 

var starty=data.starty; 

var dx=(range[1].x-range[0].x)/width; 

var dy=(range[1].y-range[0].y)/height; 

function send(line) { 

var lineData=JSON.stringify(line.map( function 
makeReturnData(point) { 

return{ 

drawLoc: point.drawLoc, 

point: point.point, 

escapeValue: point.point.mandelbrot() 

}; 

})); 

var json=JSON.stringify({ 


type: 'draw', 
data: lineData 


}); 


postMessage( json); 


function xIter(x,maxx, drawXx) { 

var line=[]; 

var drawyY=starty; 

var y=range[0].y; 

var maxY=range[1].y; 

while(y<maxyY) { 

if (line. length%chunkSize===chunkSize-1) { 
send(line); 

line=[]; 


var pt={ 

point: new Complex(x,y), 
drawLoc: { 

x: drawXx, 

y: drawY 

} 

}; 

line.push(pt); 

y+=dy; 

drawY+=1; 

} 

send(line); 

if (x <maxxX& &drawX < width) { 
xIter.defer(1, this, [x+dx, maxX, drawX+1] ); 
} 


xIter(range[0].x,range[1].x,startx); 


此 应 用 的 最 后 一 部 分 是 Mandelbrot 集 合 的 实际 数学 计算 ， 如 例 8-5 
所 示 。 此 功能 用 一 个 while 循 环 实现 而 不 是 一 个 纯 函 数 〈 见 第 2 章 的 “ 函 
数 式 编 程 ) ， 因 为 JavaScript 不 文 持 尾 递 归 。 用 一 个 递归 函数 实现 更 
酷 ， 但 将 有 可 能 导致 堆栈 淤 出 。 


例 8-5: Mandelbrot 计 算 


Complex.prototype.max_iteration=255%*2; 
Complex. prototype.mandelbrot=function(){ 
var x0=this.x; 

var yO=this.y; 

var X=x0; 

var y=y0; 

var count; 

var X_, y_; 

var max_iteration=this.max_iteration; 
function inSet(x,y){ 

return x*xty*y<A4; 

} 

count=0; 

while(count <max_iteration& &inSet(x,y)){ 
X_=xX*x-y*y+xO; 

y_=2*x*yt+y0; 

count+=1; 

X=X_3 

y=y_:; 

} 


return count; 


}; 


当 Worker 正 在 进行 Mandelbrot 和 集合 计算 时 ， 其 主要 事件 循环 被 阻 
。 所 以 UI 进 程 不 可 能 发 送 给 它 一 个 新 的 计算 任务 ， 或 者 更 准确 地 
说 ，Worker 将 不 接收 新 的 任务 ， 直 到 完成 当前 任务 。 


要 中 断 或 改变 Worker 的 行为 ， 例 如 ， 要 让 用 户 在 用 户 界面 中 选择 
绘制 Mandelbrot 集 合 的 那个 区 域 ， 然 后 要 求 Worker 绘 制 该 区 域 ， 有 几 
种 方法 可 以 实现 。 


最 人 简单 的 方法 是 终止 该 Worker 并 创建 一 个 狐 的 。 这 有 一 个 优点 ， 
新 的 Worker 以 干净 的 状态 开始 ， 没 有 之 前 运行 的 Worker 遗 留 下 来 的 东 


西 。 另 一 方面 ， 这 也 意味 着 WwWorker 必 须 从 头 开 始 加 载 所 有 的 脚本 和 数 
据 。 因 此 ， 如 果 Worker 的 启动 时 间 很 长 ， 这 可 能 不 是 最 好 的 办 法 。 


第 二 种 方法 稍微 复杂 一 些 ， 通 过 程序 手动 管理 任务 队列 。 在 主线 
程 中 或 包含 一 个 数据 块 列表 的 Worker 中 计算 数据 结构 。 当 一 个 Worker 
需要 任务 时 ， 它 可 以 发 送 一 个 消 恩 到 该 队列 对 象 ， 让 它 发 送 一 个 任 
务 。 这 种 创建 更 复杂 ， 但 有 几 个 好 处 。 首 先 ， 在 应 用 需要 做 不 同 的 事 
情 时 ，Worker 并 不 需要 重新 启动 。 其 次 ， 人 允许 使 用 多 个 Worker。 当 需 
要 问题 的 下 一 部 分 时 ， 每 个 Worker 可 以 查询 队列 管理 侨 。 


也 可 以 让 主任 务 按 顺 序 发 送 大 量 的 事件 给 Worker。 然 而， 这 样 做 
有 一 个 问题 ，JavaScript 没 有 办 法 清除 事件 队列 。 因 此 ， 使 用 这 样 一 个 
可 以 管理 的 作业 队列 ， 似 乎 是 最 好 的 办 法 。 在 下 一 节 ， 我 们 将 探讨 这 
一 解决 方案 。 


没有 规定 一 个 应 用 中 只 能 用 一 个 网 络 Web Worker。JavaScript 很 乐 
意 让 用 户 启 动 合理 数量 的 Worker。 当 然 ， 这 只 有 当 问 题 可 以 很 容易 地 
分 割 成 几 个 Worker 时 才 有 意义 ， 很 多 问题 都 可 以 做 到 这 一 点 。 


每 个 Worker 是 一 个 独立 的 构造 ， 因 此 可 以 用 同样 的 源 代码 创建 多 
个 Worker， 或 者 创建 多 个 独立 工作 的 Worker 。 


Worker 是 JavaScript 中 合理 的 重大 结构 ， 因 此 为 一 个 给 定 任务 创建 
十 个 以 上 worker 可 能 是 一 个 坏 主意 。 然 而 ， 最 佳 数量 可 能 要 根据 用 户 


的 浏览 右 和 人 硬件 以 及 要 执行 的 任务 来 确定 。 


测试 和 调试 Web Worker 


在 过 去 十 多 年 里 ，JavaScript 调 试 工具 已 经 变 得 相当 不 错 。Firebug 
和 Chrome 开 发 者 工具 都 是 一 流 的 调试 工具 ， 可 以 用 来 测试 JavaScriptMY 
用 。 遗 憾 的 是 ， 它 们 不 能 访问 Web Worker 中 运行 的 代码 。 因 此 只 能 设 
置 断 点 或 按 步 调试 Worker 中 的 代码 。Worker 也 不 能 在 列表 中 显示 出 现 
在 Firebug 和 Chrome 相 应 script 标 记 中 的 已 加 载 脚本 。Selenium 或 QUnit 
测试 也 不 能 直接 测试 在 Web Worker 中 运行 的 Worker 代 人 码 。 


Worker 中 的 错误 被 报告 给 Firefox 和 Chrome 的 控制 台 。 当 然 ， 在 许 
多 情况 下 ， 知 道 错误 发 生 在 哪 一 行 和 哪 一 个 文件 没有 太 大 帮助 ， 因 为 
实际 的 错误 可 能 在 别处 。 


Chrome 没 有 为 程序 员 提 供 调 斌 Web Worker 的 方法 。Chrome 开 发 者 
工具 "script" 面 板 包 含 一 个 "Web Workers" 复 选 框 。 此 选项 会 让 Chrome 用 


iframe 模 拟 一 个 Worker ° 


多 线程 复 用 模式 

可 以 使 用 Web Worker 从 用 户 浏览 如 任务 中 取出 复杂 的 任务 ， 为 程 
序 员 提 供 强 大 的 力量 。Firefox 自 3.5 版 本 开始 支持 Worker,Chrome 从 4.0 
版 本 开始 支持 Woker。 同 样 ，Safari 和 Opera 也 从 某 个 时 间 开 始 支 持 
Worker。 然 而 ， 截 至 日 前 微软 Intermet Exporer 还 不 支持 Web Worker 
(虽然 它 可 能 会 在 IE10 中 出 现 ) ，iOS 上 的 Safari 中 也 不 支持 Web 
Worker， 因 此 iPad/iPod/iPhone 平 台 不 可 能 支持 Worker 。 
理想 的 方法 是 用 一 个 类 库 ， 使 程序 员 能 将 要 运行 的 代码 抽象 成 一 
个 函数 或 模块 ， 用 最 佳 的 方式 在 后 台 目 动 运行 这 些 
Web Worker 可 用 时 ， 要 么 通过 setTimeout 方 法 。 此 外 ， 这 个 类 库 应 该 能 


够 提供 一 万 通用 的 接口 ， 用 于 各 种 交互 ， 如 将 一 条 消 忌 发 回 主 应 用 。 


这 样 的 类 库 应 该 用 功能 检测 获取 要 运行 代码 的 版 本 ， 而 不 是 用 浏 
检测 。 虽 然 现在 有 的 浏览 器 支持 Web Worker 有 的 不 文 择 ， 但 是 将 
改变 这 种 状况 ， 而 且 类 库 应 该 能 够 在 这 些 变化 出 现时 仍 能 工作 。 


代码 ， 要 么 是 当 
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此 模式 下 实际 工作 的 函数 将 以 运行 状态 为 参数 重复 调用 ， 完 成 任 
何 它 需要 做 的 处 理 ， 并 返回 一 个 修改 后 的 状态 参数 ， 用 于 再 次 调用 直 
到 完成 工作 ， 然 后 调用 stop() 方 法 或 以 其 他 方式 中 断 。run 函 数 〈 见 例 8- 
6) 应 作为 一 个 纯 函 数 处 理 ， 它 应 该 只 处 理 其 输入 并 返回 一 个 值 ， 而 不 


会 对 全 局 状态 的 变化 有 任何 影响 ， 


将 有 一 套 不 同 的 接口 集 可 用 。 


例 8-6 : Run 


(function() 


runner .setup(function(state) 


{ 


根据 它 是 否 作为 一 个 Worker 运 行 ， 


this.postMessage({state: state}); 


return{ 
time: state.timet=1 


}, { 
time: 0 


}); 
}()); 


当 Worker 运 行 时 〈 见 例 8-7) ，run 函 数 可 以 从 一 个 标准 循环 的 内 


部 运 和 丁 。 o IZ At SAUL 充 通过 
初始 状态 传递 给 run 方 法 。 
调用 stop 函 数 ， 状 态 将 在 这 一 


一 些 初 始 参数 调用 postMessage， 然 后 将 它们 作为 
该 方法 将 通 
点 发 回 主 消息 。 


过 while 循 环 反复 调用 ， 直 到 它 


例 8-7: 用 Web Worker 运 行 函 数 


var runner= 


{ 
stopFlag: false, 


postMessage: function(message) 


self .postMessage(message); 
stop: function( ) 


this.stopFlag=true; 


}, 


error: function(error) 


{ 
this.stopFlag=true; 
}, 

setup: function(run) 
{ 


this .run=run; 

var that=this; 

self .onmessage=function message(event ) 
{ 

that ,execute(JSON.parse(event .data) ); 
}; 

}- 

execute: function(state) 

{ 

var that=this; 

setTimeout(function runIterator() 

{ 

that.state=that.run.apply(that, [that.state]); 
if(that.stopFlag) 


that ..postMessage(that.state); 
} 


else 


{ 

that .execute(); 
} 

}, 16); 

} 

}; 

(function() 


{ 


runner.setup(function(state) 
{ 

var newstate=state; 

//modify newstate here 
return newstate; 

Fed 

time: © 

}); 

}()); 


= Dil it at Web Worker 不 可 用 时 ， 这 个 函数 应 该 以 短 时 间 重 复 超 
时 的 方式 运行 ， 而 不 是 放 在 while 循 环 中 〈 见 例 8-8) 。while 循 环 会 阻 
塞 消 息 队 列 ， 导 致 主线 程 不 能 发 送 消 忆 到 Worker。 这 个 库 的 主要 目的 
号 古 用 超时 来 释放 主线 程 ， 同 时 通过 消 姑 根据 需要 改变 函数 运行 的 状 
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与 之 前 一 样 ，runner 要 用 回调 函数 返回 的 state 作 为 参数 再 次 调用 
run 芳 数 。 但 是 ， 由 于 它 不 是 一 个 Web Worker， 因 此 随后 要 调用 
window.setTimeout() 方 法 经 过 一 段 时 间 后 再 显示 下 一 个 迭代 ， 并 再 次 
调用 该 函数 。 


例 8-8: 不 用 Web Worker 运 行 函数 


Var runner= 


stopFlag: false, 
//override this function 
onmessage: function(msg) 


{ 
if(msg.state) 


var state=msg.state; 
$('#status').html( "time: "+state.time); 


} 
if(msg.set) 
this.state=msg.set; 


return this.state; 


Je 


postMessage: function(message) 


{ 


this .onmessage(message); 


stop: function() 
this.stopFlag=true; 


error: function(error) 


{ 
this.stopFlag=true; 


J; 


setup: function(run,state) 


this.run=run; 
this.state=state; 
this.execute(); 


上 


execute: function() 


var that=this; 
setTimeout(function runIterator() 


{ 
that.state=that.run.apply(that, [that.state]); 
if(that.stopFlag) 


that ..postMessage(that.state); 
} 
else 


that ,execute( ); 


250); 


OI w 


模拟 的 Web Worker 与 代码 主体 之 间 的 通信 也 有 所 不 同 。 由 于 之 后 
没有 回调 的 postMessage 方 法 ， 运 行者 必须 通过 提出 一 个 注册 回调 机 制 
来 模拟 ， 该 回调 可 以 采用 与 Web Worker 的 onmessage 处 理 函 数 相 同 的 参 
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本 模型 提出 了 一 个 创建 在 Web Worker 和 一 般 的 JavaScript 之 间 可 移 
植 代码 的 模型 ， 这 不 是 一 个 完整 的 解决 方案 。 它 缺少 一 些 功能 ， 如 加 


载 代 码 。 还 缺少 调用 异步 方法 〈 如 一 个 Ajax 调用 ) 的 策略 和 完成 时 的 
恢复 处 理 。 这 很 有 必要 ， 通 常 Web Worker 补 设计 用 于 处 理 絮 密集 型 的 
工作 ， 有 时 在 访问 一 个 Ajax 调用 或 IndexeDB 时 有 意义 。 


Web Worker 库 


在 主线 程 中 进行 JavaScript 编 程 时 ， 程 序 员 用 一 个 库 ， 如 jQuery 来 
改善 的 API 和 隐藏 浏览 器 之 间 的 差异 。 对 于 使 用 Web Worker， 有 一 个 
名 为 jQuery Hive (http://github.com/rwldrn/jquery-hive) 的 jQuery 的 扩展 
提供 了 此 功能 。Hive 包 括 JavaScript 主 线程 中 的 PollenJS 库 ， 该 库 包 括 
创建 Worker 的 接口 。 


如 果 需 要 的 话 ，Hive 还 将 编码 和 解码 主线 程 和 Worker 之 间 的 消 
息 。 在 某 些 浏览 器 中 (尤其 是 Firefox) ， 复 杂 的 数据 可 以 通过 
postMessage 接 口 发 送 。 然 而 ， 在 Chrome 和 Safari 的 一 些 版 本 中 ， 
postMessage 的 只 处 理 字符 串 或 其 他 简单 的 数据 。 


Hive 还 在 Worker 中 包含 jQuery API 的 一 个 子 集 。 在 Hive API 中 最 重 
要 的 方法 是 $.get() 和 $.post()， 对 应 jQuery 中 的 啊 应 API。 例如， 如 果 一 
个 Worker 需 要 通过 Ajax 访问 服务 锅 ， 使 用 Hive 更 容易 实现 。 


Hive 还 包括 通过 $.storage 访 问 永 久 存储 接口 。 要 设置 一 个 值 ， 使 
用 $.storage (name, value) 。 如 果 设 置 为 不 用 第 二 个 value 参 数 ， 调 用 
$.storage (name) 将 返回 现 有 的 值 。 


Hive 中 还 包括 $.decode() 和 $.encode()， 可 用 于 对 JSON 消 乱 进行 编 
码 或 解码 。 


第 9 章 Web Socket 


HTTP 是 一 个 请 求 和 响应 协议 。 其 设计 目的 是 请 求 文件 ， 并 围绕 请 
求 文件 的 思想 进行 操作 。 这 对 于 必须 先 加 载 数据 然后 再 进行 保存 的 应 
用 类 型 非常 有 效 。 


然而 ， 对 于 需要 服务 大 实时 数据 的 应 用 效果 相当 糟糕 。 许 多 应 用 
类 型 要 求实 时 或 半 实 时 访问 服务 器 。 例 如 聊天 或 那些 实时 共 至 数据 的 
应 用 ， 如 许多 Google Office 应 用 ， 对 服务 器 来 说 确实 需要 一 个 方法 在 
服务 器 上 发 生 某 事 时 疝 浏 览 絮 推送 数据 。HTTP 中 有 几 种 实现 方式 ， 但 
没有 真正 有 效 的 方法 。 


一 些 应 用 ， 如 Gmail， 只 简单 地 建立 了 一 系列 大 型 的 HITP 请 求 序 
A, 每 秒 一 次 以 上 ( 见 图 9-1) 。 这 样 产生 大 量 的 开销 ， 而 且 也 不 是 一 
个 特别 有 效 的 服务 器 轮 询 方法 。 同 时 ， 还 会 产生 大 量 的 服务 器 负载 ， 
因为 每 个 请 求 都 需要 在 服务 器 上 建立 和 销毁 ， 以 及 HTTP 头 和 用 户 身份 
验证 的 网 络 开销 。HTTP 头 可 以 给 每 个 请 求 增加 几 百 KB。 在 一 个 繁忙 
的 服务 器 上 ， 这 会 给 服务 器 和 网 络 增加 相当 数量 的 负载 。 


9-1 Firebug 调 试 Gmail 


第 二 种 方法 是 打开 一 个 到 服务 器 的 HTTP 请 求 ， 并 把 它 挂 起 ， 当 服 
务 器 需要 发 送 一 些 数据 时 ， 它 会 发 送 到 客户 并 ， 然 后 关闭 HTTP 请 求 。 
此 时 浏 蜗 器 会 打开 一 个 新 的 连接 并 重复 这 个 过 程 。 根 据 所 采用 的 特定 
服务 大 技术 ， 当 持续 运行 一 个 大 型 的 线程 池 和 连接 时 ， 即 使 处 于 等 待 
状态 仍 会 在 服务 器 上 导致 显著 的 负载 ， 尽 管 在 使 用 非 阻塞 服务 器 (如 
NodeJS) 时 ， 这 几乎 不 成 问题 。 更 复杂 的 是 ， 因 为 该 浏览 器 可 能 只 多 
许 在 给 定时 间 问 给 定 服务 右 发 送 有 限 数 量 的 Ajax 请 求 ， 因 此 为 处 理 一 
个 或 两 个 请 求 打 开 它 可 能 会 导致 别 的 工作 被 阻塞 ， 这 不 是 实现 的 最 佳 
a 


HTML 5 引入 了 Web Socket 的 思想 ， 与 TCP/P 和 套 接 字 的 工作 方式 非 
常 类 似 。 浏 览 器 向 目标 服务 器 打开 一 个 套 接 字 ， 并 保持 开放 直到 它 不 
再 需要 或 者 显 式 天 财 为 止 。 套 接 字 是 一 个 双 同 实时 数据 通道 ， 而 一 个 
HTTP 请 求 是 一 个 简单 的 轮 询 系统 。 如 有 果 用 Ajax 通过 HTTP 发 送 每 个 键 
点 击 到 服务 器 ， 那 么 有 可 能 产生 至 少 300~400KB 的 开销 ， 用 cookie 处 
理 每 次 按键 可 能 需要 一 两 和 KB。 没 有 用 于 套 接 字 的 HITP 头 ， 将 减少 
很 多 开销 ， 开 销 将 减少 到 只 有 几 个 KB 。 


截止 到 本 文 编写 时 (2011 年 8 月 ) ，WebSocket 已 经 在 Chrome8 及 
其 更 高 版 本 和 Safari5 版 本 中 得 到 支持 。Firefox 版 本 6 中 包含 了 对 Web 
Socket 的 文 持 ， 但 构造 锅 为 MozWebSockets。Opera 已 经 实现 了 Web 
Socket 规 范 ， 但 是 由 于 安全 问题 有 行 解 决 ，Web Socket 默 认为 关闭 状 
态 ， 对 于 不 文 持 Web Socket 的 浏览 妖 可 以 使 用 传统 的 HTTP 或 者 Flash 进 
行 回调 。 


有 一 些 类 库 ， 如 socket.io (http://socket.io) ， 将 为 Web Socket 提 供 
一 个 持续 的 接口 ， 并 癌 可 能 不 支持 Web Socket 的 浏 顺 需 提 供 回 调用 于 
老式 HTTP 通 信 。 也 可 以 在 支持 Flash 但 不 支持 Web Socket] bias FAA 
Flash 模 拟 Web Socket 。 


Web Socket 规 范文 档 也 似乎 是 一 个 进展 中 的 工作 。 虽 然 Web 
Socket 已 部 署 在 一 些 浏 贤 右 中 ， 但 是 关于 它们 如 何 实现 的 文档 还 很 


少 。 已 经 出 现 了 一 些 Web Socket 标 准 的 早期 版 本 ， 但 是 它们 还 互相 不 


兼容 。 
Web Socket 接 口 


要 使 用 Web Socket， 首 先 需要 创建 一 个 WebSocket 对 象 ， 并 传递 一 
个 Web Socket URL 作 为 参数 。 不 同 于 HTTP 方法 ，Web Socket URL 以 
ws 或 wss 开 头 ， 一 个 安全 的 Web Socket 将 使 用 SSL. 类 似 于 Ajax 下 的 
HTTPS: 


var socket=new WebSocket("ws: //example.com/socket"); 


一 旦 套 接 字 的 连接 打开 ， 将 会 调用 套 接 字 的 socket.onopen() 回 调 ， 
让 程序 知道 一 切 准 备 束 绪 。 当 人 套 接 字 天 闭 时 ，socket.onclose() 方 法 将 被 
调用 。 如 有 果 浏 览 锅 硕 望 关闭 套 接 字 ， 应 该 调用 socket.close(0)。 


用 套 接 字 发 送 数据 使 用 socket.send ("data") 方法 。 数 据 限定 为 字 
符 串 ， 因 此 如 有 果 是 比 简单 的 字符 串 更 复杂 的 数据 ， 需 要 将 该 数据 编码 
为 JSJON、XML 或 其 他 数据 交换 格式 。 此 外 ， 套 搂 字 仅 处 理 文本 ， 如 
果 必 须发 送 的 数据 是 二 进 制 数据 ， 应 该 通过 一 些 方法 将 其 编码 成 文 
本 o 


建立 Web Socket 连 接 


Web Socket 连 接 开始 很 像 一 个 HTTP 连 接 。 它 在 端口 80 (WS) 或 
443 (WSS) 上 打开 一 个 到 服务 器 的 连接 ， 然 而 ， 除 了 标准 的 HTTP 
头 ， 它 还 包括 一 些 新 的 报头 ， 告 诉 服务 器 这 是 一 个 Web Socket 连 接 ， 
而 不 是 一 个 HITP 连 接 。 它 还 包括 一 些 用 于 提供 安全 的 握手 字 节 。Web 
Socket 协 议 使 用 端口 80 和 443， 多 数 代理 和 防火 墙 需要 进行 正确 处 理 。 
Web Socket 也 可 以 用 与 HITP 协 议 相 同 的 方法 来 指定 不 同 的 端口 ， 但 是 
Web Socket 调 用 (如 一 个 Ajax) 必须 与 产生 它 的 Web 服务 器 使 用 相同 的 
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一 旦 连接 建立 ， 连 接 的 两 端 都 可 以 用 它 发 送 数据 。 可 以 发 送 任何 
有 效 的 UTF-8 格 式 的 字符 串 。 具 体 的 数据 格式 由 服务 器 端 和 客户 端 共 
同 决 定 。 通 常情 况 下 ， 数 据 将 可 能 是 JSON 或 XML， 如 果 需 要 也 可 以 
使 用 其 他 格式 。 


Web Socket 示 例 


为 了 说 明 如 何 使 用 Web Socket， 给 出 了 例 9-1 中 的 简单 示例 。 这 里 
用 一 个 非常 傈 单 的 JavaScript 范 数 同 一 个 提供 股票 价格 服务 的 服务 如 打 
开 了 一 个 套 接 字 。 它 发 送 一 个 感 兴趣 的 股票 代码 (IBM) 。 然 后 ， 服 
务 絮 会 找到 该 股票 的 价格 并 将 其 以 一 个 JSON 发 回 给 客户 端 。 服 务 絮 可 
以 设置 为 每 5s 轮 询 一 次 新 价格 ， 并 在 价格 变化 时 发 送 回 客户 端 。 客户 
端 将 只 在 每 次 价格 变动 时 刷新 元 素 。 


例 9-1: Socket 客 户 端 示例 


$(function() 
{ 


var Socket=new WebSocket('ws: //localhost/stockprice' ); 
//wait for socket to open 
socket .onopen=function( ) 


{ 

socket.send( JSON. stringify( 
ticker: "ibm" 

})); 

socket .onmessage=function(msg) 
var prices=$.parseJSON(msg.data); 
var html="IBM: "+prices.ibm; 
$('div.prices').html(html1); 


} 
}); 


对 任何 用 过 Ajax 的 程序 员 来 说 ， 应 该 非常 熟悉 例 9-1 中 处 理 Web 
Socket 的 浏览 器 代码 。 用 相应 的 URL 创 建 一 个 Web Socket 对 象 。 一 旦 
Socket 被 打开 〈 一 定 要 等 它 打开 ) ， 数 据 可 以 通过 socket.send 事 件 发 送 
到 服务 器 。 当 服务 器 将 数据 发 送 回 浏览 器 时 ， 通 过 事件 对 象 的 数据 字 
段 中 的 字符 串 调用 socket.onmessage 事 件 与 事件 对 象 的 数据 字段 的 字符 
串 。 在 这 种 情况 下 ， 数 据 是 JSON 的 ， 因 此 它 可 以 用 标准 浏览 器 的 
JSON 解 析 方 法 进行 解析 ， 然 后 显示 在 浏览 器 中 。 


如 果 没 有 服务 器 使 用 它 ，Web Socket 客 户 端 就 没有 多 大 意义 。 通 
a Web Socket 用 于 处理 事件 驱动 的 数据 ， 如 共 至 文件 、 股 票 代码 或 聊 
天 服务 。 虽 然 Web 服 务 器 开发 往往 选择 PHP 语 言 ， 但 是 对 于 本 例 ， 包 
舍 为 长 期 运行 程序 和 事件 建立 的 编程 模型 的 语言 将 更 有 意义 。 


这 里 有 几 个 不 错 的 选择 。Node.js 的 效果 很 好 ， 而 且 具 有 JavaScript 
《Web 程 序 员 已 经 熟悉 了 ) 的 优势 。 其 他 可 能 包括 : Erlang 和 Yaws， 
有 一 个 Web Socket 接 口 以 及 多 处 理 器 模式 ， 可 以 作为 此 类 编程 的 思 
路 。 还 有 一 些 选项 用 于 Java 和 JVM 的 其 他 语言 ， 包 括 Scala、Clojure 
等 。 也 可 以 用 Ruby 以 及 可 能 大 部 分 的 .NET/CLR 语 言 实现 。 说 实话 ， 
大 部 分 用 于 Web 服 务 器 编程 的 语言 能 够 使 用 Web Socket 。 


在 本 例 服务 器 端 代码 中 (用 Node.js 实 现 ) ， 服 务 器 是 用 
websocket-server 包 建立 的 ， 可 以 通过 NPM 或 者 在 github 上 找到 。 服 务 
需 在 8080 端 口上 等 待 连接 ， 当 收 到 一 个 连接 时 调用 回调 。 该 连接 回调 


连接 对 象 等 待 消息 到 达 。 在 本 例 中 ， 随 后 调用 一 个 高 阶 函 数 
tickerUpdate， 该 函数 查询 股票 价格 并 在 对 应 股票 价格 改变 时 调用 回 
调 ， 发 送 新 的 价格 给 客户 。Node 编 程 更 全 面 的 指导 查阅 Tom Hughes- 
Croucher 的 著作 《Node: 构建 与 运行 》 (Node: Up and Running) ° 


例 9-2: Socket 服 务 器 示例 


var ws=require("websocket-server"); 
var server=ws.createServer(); 
server .addListener("connection", function(connection) 


{ 


connection.addListener("message", function(msg) 


var tickerSymbol=msg. ticker; 
tickerUpdate(tickerSymbol, function(price) 

{ 

var msg= 

{ 

}; 

msg[tickerSymbol ]=price; 

server .send(connection.id, JSON.stringify(msg) ); 


server.listen(8080); 


Web Socket| 办 议 


虽然 多 数 时 候 ，Web Socket 的 底层 细节 与 程序 员 无 关 ， 但 是 浏览 
器 中 和 服务 器 上 的 接口 将 负责 该 细节 ， 并 提供 一 个 可 以 发 送 数据 的 
API。 


话 虽 这 么 说 ， 但 是 有 时 知道 天 于 事情 如 何 运 作 的 底层 细节， 对 于 
了 人 解 为 什么 某 些 东西 不 能 正常 工作 或 者 在 其 他 环境 下 实现 Web Socket 
客户 并 可 能 古 有 用 的 。 特 别 需 要 了 解 僚 接 字 是 如 何 建 立 的 。 


Web Socket 在 浏览 种 和 服务 右 之 间 使 用 TCP 套 接 字 而 不 是 一 个 
HTTP 封 套 进 行 数 据 传送 。 但 重要 的 是 要 了 解 如 何 建立 一 个 套 接 字 。 当 
浏 贤 右 试图 打开 一 个 套 接 字 时 ， 它 发 送 一 个 看 起 来 像 HTTP GET 请 
求 ， 但 有 一 些 额 外 的 头 的 东西 ， 如 例 9-3 所 示 。 


连接 建立 后 ， 然 后 来 回 发 送 数据 帧 。 每 帧 以 一 个 空 字 节 0x00 开 
始 ， 以 一 个 0xFF 字 市 结束 。 封 套 内 部 是 UTF-8 格 式 的 数据 。 


例 9-3: Socket% 


GET/socket HTTP/1.1 
Upgrade: WebSocket 
Connection: Upgrade 

Oragin: http://www.test.com 
Host: www.test.com 
Content-Length: 0 


有 一 些 Web Socket 的 服务 器 端 实 现 ， 可 以 在 Python、Ruby、 
Erlang、Node.js、Java 以 及 其 他 语言 中 工作 。Web Socket 的 类 库 正 在 不 
断 发 展 ， 有 各 种 状态 的 开发 包 可 用 于 Web 开 发 用 到 的 几乎 所 有 主要 语 
言 中 。 一 般 情 况 下 ，Web Socket 的 服务 器 端 将 取决 于 项 目的 其 他 需 
要 。 因 此 ， 对 于 为 给 定 项 目 使 用 的 环境 寻找 Web Socket 包 很 有 意义 。 


Ruby Event Machine 


Ruby Event Machine 也 为 使 用 Web Worker 提 供 了 一 个 理想 的 平台 ， 
因为 它 向 程序 员 提 供 了 一 个 基于 事件 的 接口 ， 通 过 这 个 接口 可 以 向 客 
户 端 发 送 数据 流 。Event Machine: Web Socket 接 口 与 Java Script 接口 配 
合 得 很 好 。 在 客户 端 ，EventMachine 接 口 有 用 于 onopen、onmessage 和 
onclose 的 标准 事件 处 理 程序 ， 也 可 以 通过 ws.send() 函 数 把 数据 传 回 客 


户 端 。 


例 9-4 显 示 了 一 个 非常 普通 的 Ruby Web Socket 接 口 的 "hello 


world" 示 例 。 
例 9-4: Ruby EventMachine Web Socket 处 理 程序 


require'em-websocket ' 

EventMachine: WebSocket.start(: host=>"0.0.0.0", : port=> 
8080 )do|ws | 

ws .onopen{ws.send"Hello Client!"} 

ws .onmessage{|msg|ws.send"Pong: #{msg}"} 

ws.onclose{puts"WebSocket closed"} 


end 


Erlang Yaws 


Erlang 是 数 十 年 前 开发 的 非常 纯正 的 函数 式 语言 ， 当 时 主要 用 于 
电话 的 程控 开关 ， 后 来 发 现在 很 多 其 他 需要 大 量 并 行 或 者 强健 壮 性 的 
领域 也 很 适用 。 它 同时 具有 并 行 性 、 容 错 性 和 强 拓 展 性 。 近 年 来 它 又 
用 于 网 络 世 界 ， 因 为 它 所 有 对 于 电话 程控 开关 方面 的 优化 在 网 络 服务 
志方 面 也 非常 有 用 。 


Erlang Yaws 网 络 服务 器 当然 也 文 持 Web Socket。 相 天 文档 和 简单 
的 代码 示例 可 以 在 Yaws 的 Web Sockets 页 面 


(http://yaws.hyber.org/websockets.yaws) 找到 ， 如 例 9-5 所 示 。 
例 9-5: Erlang Yaws Web Socket 处 理 程序 


out(A)-> 

case get_upgrade_header (A#arg.headers)of 

undefined- > 

{content, "text/plain", "You're not a web sockets client!Go 
away!"}; 

"WebSocket"- > 

WebSocketOwner=spawn(fun()- >websocket_owner()end), 

{websocket, WebSocketOwner, passive} 

end. 

websocket_owner()- > 

receive 

{ok, WebSocket}- > 

%%This is how we read messages(plural!)from websockets on 
passive mode 

case yawS_api: websocket_receive(WebSocket )of 

{error,closed}- > 


io: format("The websocket got disconnected right from the 
start." 

"This wasn't supposed to happen! ~n"); 

{ok, Messages }- > 

case Messages of 

[<<"client-connected">>]-> 

yaws_api: websocket_setopts(WebSocket, [{active, true}]), 

echo_server(WebSocket ) ; 

Other- > 

io: format("websocket_owner got: ~p.Terminating~n", [Other]) 

end 

end; 

_->ok 

end. 

echo_server(WebSocket ) - > 

receive 

{tcp,WebSocket, DataFrame}- > 

Data=yaws_api: websocket_unframe_data(DataFrame) , 

io: format("Got data from Websocket: ~p~n", [Data]), 

yaws_api: websocket_send(WebSocket, Data), 

echo_server(WebSocket ) ; 

{tcp_closed, WebSocket}- > 

io: format("Websocket closed.Terminating echo_server...~n"); 

Any- > 

io: format("echo_server received msg: ~-p~n", [Any]), 

echo_server(WebSocket ) 

end. 

get_upgrade_header (#headers{other=L}) - > 

lists: foldl(fun({http_header, _, KO, _, V}, undefined) - > 

K=case is_atom(K0)of 

true- > 

atom_to_list(KO); 

false-> 

KO 

end, 

case string: to_lower(K)of 

"upgrade" - > 

V; 

_-> 

undefined 

end; 

(_, Acc)-> 

Acc 

end, undefined,L). 


如 采 你 不 收 Erlang 的 语法 的 话 ， 这 段 代码 会 很 难 居 。 代 码 的 关键 
点 在 于 ， 客 户 端 可 以 发 送 任意 组 合 的 请 求 〈 比 如 TCP 连 接 、Web 
Socket 和 连接 或 者 是 带 数据 的 请 求 ) 并且 服务 器 端 能 按照 发 送 请 求 的 不 
同 把 每 条 消 筷 都 正确 处 理 。 


第 10 草 “者 标记 


除了 大 量 处 理 数据 的 新 接口 外 ，HTML 5 还 引入 了 一 些 新 的 标 
记 ， 可 以 用 于 在 一 个 Web 页 面 中 提高 应 用 开发 人 员 开 发 优质 应 用 的 能 
Fe 


应 用 标记 


任何 应 用 程序 中 都 有 的 一 个 共同 任务 : 向 用 户 反馈 一 个 长 时 间 运 
行 任务 的 运行 进度 。 让 用 户 知道 任务 正在 进行 ， 没 有 冻结 。 可 以 使 用 
一 些 <div> 元 素 和 目 定 义 的 CSS 显 示 一 个 进度 标尺 ， 但 HTML 5 通过 
一 个 新 <progress> 标 记 规 范 了 程序 和 外 观 。 截 至 本 书 编 写 时 ， 该 标记 
已 经 在 Firefox 和 Chrome 中 得 到 支持 。 它 提供 了 两 个 属性 使 其 易于 向 用 


户 显示 进度 : value 显 示 进 度 条 的 当前 值 ，max 显 示 进 度 条 的 最 大 值 。 


为 了 向 旧版 浏览 器 的 用 户 显示 一 个 进度 指示 ， 建 议 在 进度 条 内 的 
<span> 元素 里 包含 一 些 形式 的 文字 。 例 10-1 显 示 了 一 个 完成 进度 为 
20% 的 进度 条 的 代码 。 例 6-4 显 示 了 JavaScript 如 何 将 属性 作为 事件 进行 
更 新 ， 从 而 在 程序 中 指示 进度 。 进 度 条 也 可 以 像 任何 其 他 HTML 元 素 
一 样 用 CSS 设 置 样式 。 


例 10-1: meter 指 示 器 


<!DOCTYPE html> 

<html> 

<head> 
<title>Progress</title> 
</head> 

< body > 

<progress value="20"max="100" > 
<span>running</span> 
</progress> 

</body > 

</html> 


< progress > 70 #8 A] UATE- DEZI, <meter> 
元 素 可 以 用 于 显示 一 个 静态 值 ， 如 一 个 磁盘 有 多 少 可 用 空间 或 者 一 个 
筹 款 目标 增加 了 多 少 钱 。 


<meter> 标 记 可 以 带 一 些 参数 ， 包 括 min、max、low、high、 
optimum 和 value。 所 有 这 些 都 应 设置 为 数字 值 。min 和 max 值 显示 值 范 
围 的 两 端 ， 而 value 属 性 显示 当前 值 。High、low 和 optimum 参 数 允 许 标 
记 将 范围 分 成 子 段 。 通 过 CSS， 可 以 用 不 同 的 样式 值 将 范围 的 不 同 部 
分 设置 成 不 同 外 观 。 例 如 10-2 演 示 了 <meter> 标 记 的 用 法 。 


像 <progress> 标记 一 样 ，< meter> 标 记 内 应 封装 一 个 <span> 元 
素 ， 用 于 在 不 支持 此 标记 的 浏览 器 中 显示 该 数据 。 目 前 ，Chrome 与 
Opera 都 文 持 这 个 标记 。 其 他 浏 哆 器 可 能 会 逐渐 跟 上 来 。 


例 10-2: meter 指 示 器 


< IDOCTYPE html> 
<html> 
<head> 


<title>Meter</title> 

</head> 

<body> 

<meter min="0"value="20"max="100" > 
<span> 20%</span> 

</meter> 

</body > 

</html> 


通过 WAI-ARIA 无 障碍 访问 


使 用 Web 应 用 【或 任何 其 他 的 GUI 上 用 程序 ) 对 于 那些 身体 有 残 
疾 的 人 来 说 可 能 有 很 大 的 障碍 。 因 此 ，HTML 5 定义 了 无 障碍 富 互 联 
网 应 用 (ARIA) 。 尤 其 针对 视觉 障碍 (其 中 可 能 包括 出 于 某 种 原因 ， 
仍 在 使 用 非 图 形 浏览 器 的 用 户 ) 。 通 过 在 应 用 的 标记 中 添加 属性 ， 可 
以 帮助 这 些 用 户 访问 标记 中 的 内 容 。 


这 部 分 不 是 一 个 对 无 障碍 访问 应 用 的 完整 指南 ， 介 绍 无 障碍 访问 
应 用 需要 整 本 书 。WAI-ARIA 的 基本 思想 是 为 页 面 上 的 元 素 增 加 可 以 
通过 屏幕 阅读 器 读 取 的 语义 ， 使 有 视觉 障碍 的 用 户 了 解 页 面 上 发 生 了 
什么 。<img> 标 记 的 alt 属 性 和 <hr> 标 记 的 title 属 性 对 这 种 文本 的 支 
持 已 经 有 一 段 时 间 了 。 


WAI-ARIA 的 最 常见 的 属性 是 role 属 性 。 它 为 元 素 提 供 了 上 下 文 环 
境 。 在 HIML 中 ， 如 <span> 和 <1li> 之 类 的 元 素 用 于 做 许多 不 同 的 事 
情 ， 从 导航 到 实际 列表 。 通 过 增加 role 属 性 ， 可 以 帮助 屏幕 阅读 器 识 
别 所 有 这 些 内 容 。 例 10-3 演 示 了 WAI-ARIA 的 用 法 。 


例 10-3: WAI-ARIA 


< IDOCTYPE html> 
<html> 
<head> 


<title>Meter</title> 

</head> 

<body> 

<ul id="tree1" 

role="tree" 

tabindex="0" 

aria-labelledby="label_1"> 

<li role="treeitem"tabindex="-1"aria-expanded="true" >Fruits 
</li> 

<li role="group"> 

<ul> 

<li role="treeitem"tabindex="-1">0ranges</li> 

<li role="treeitem"tabindex="-1">Pineapples</li> 

</ul> 

</li> 

</ul> 

</body > 

</html> 


microdata 


有 时 给 一 组 HTML 标记 增加 机 器 可 读 的 数据 是 非常 有 用 的 。 例 
如 ， 可 以 在 一 个 模板 中 用 这 个 过 程 将 数据 编码 成 一 个 页 面 ， 之 后 可 以 
通过 JavaScript 读 取 。 为 了 以 标准 化 的 方式 实现 这 种 过 程 ，HIML 5 创 
建 了 microdata 的 概念 ， 它 可 以 添加 到 HIML 5 的 标记 中 。 


传统 的 HTML 标 记 提供 应 如 何在 屏幕 上 格式 化 显示 的 信息 ， 而 不 
征 信息 本 号 。 一 个 程序 可 以 看 到 一 个 <1i > 标记， 并 知道 它 是 一 个 列 
表 中 的 项 目 ， 但 不 会 知道 是 什么 样 的 列表 。 它 是 一 个 出 售 书籍 或 者 出 
席 某 个 事件 的 列表 吗 ? 通过 添加 microdata 可 以 提供 该 数据 的 相关 信 
轧 ， 供 以 后 编程 使 用 。 


在 一 般 情 况 下 ， 与 应 用 程序 相 比 microdata 标 记 可 能 更 多 地 用 于 网 
页 中 ,但 是 可 以 调用 它 作为 插件 在 一 个 页 面 中 运行 或 者 以 其 他 方式 管 
理 一 个 页 面 的 应 用 程序 来 使 用 。 可 以 想象 ， 一 个 HTML 5 应 用 作为 公 
司 网 站 管理 面板 运行 ， 给 销售 经 理 提 供 了 空间 ， 可 以 加 入 microdata 标 
记 为 出 售 项 目 添 加 相关 信息 ，Google 搜 索引 警 或 者 JavaScript 程 序 可 以 
用 它 形 成 外 部 供应 商 ， 该 信息 可 能 会 被 加 入 到 一 个 网 页 中 。 


事实 上 ，microdata 非 常 答 单 : 只 是 一 些 附 加 到 HTML 标 记 中 的 有 具 
有 规范 名 称 的 额外 属性 ， 以 及 一 些 使 用 该 数据 属性 的 接口 。 


要 指定 页 面 中 使 用 microdata 的 部 分 ， 需 要 给 封闭 元 素 添加 一 个 
itemscope。microdata 的 词汇 库 定 义 通 过 将 itemtype 属 性 设置 为 一 个 定 
义 该 词汇 库 的 URL 来 实现 。 其 中 ，itemprop 属 性 指定 封闭 HTML 标 记 的 
特定 属性 


在 http://www.data-vocabulary.org 可 以 找到 一 些 预定 义 的 词汇 库 。 
包括 用 于 Events、Organizations、People、Products、Reviews、Review- 
Aggregates、Breadcrumbs、Offers 和 Offer-Aggregates 的 规范 。Google 能 
理解 这 些 语义 ， 从 而 提高 搜索 结果 。 


在 理论 上 应 该 在 DOM 中 有 接口 解析 microdata， 但 截至 目前 还 没有 
准备 好 ， 而 且 它 的 实现 也 可 能 参差 不 齐 。 值 得 庆幸 的 是 ，microdata 只 
是 HTML 属性 ， 因 此 它 可 以 用 CSS 选 择 器 通过 DOM 接 口 或 jQuery 很 容 
易 地 进行 解析 和 处 理 。 


新 的 表单 尖 型 


HTML 5 用 一 大 堆 新 的 表单 类 型 对 自 20 世 纪 90 年 代 初 以 来 HTML 中 
表单 的 经 典 形 式 进行 了 增强 。 其 中 大 部 分 是 天 于 从 开始 一 直 在 使 用 的 
经 典 <input type="text" > 标记 的 变化 。 这 些 新 的 表单 类 型 对 一 个 表单 
所 能 接收 的 输入 类 型 和 其 所 提供 的 接口 提供 了 和 急需 的 灵活 性 。 


许多 情况 下 ， 在 移动 设备 上 改变 输入 类 型 也 将 导致 设备 生成 一 个 

目 定 义 键 盘 ， 使 用 户 能 够 输入 正确 的 数据 类 型 。 例 如 ， 如 果 type 设 置 

为 number， 该 设备 可 以 生成 一 个 数字 键盘 。 对 于 tel 类 型 ， 设 备 会 生成 

个 看 起 来 有 点 不 同 的 数字 键盘 ， 不 过 为 输入 电话 号 码 进行 了 优化 。 

对 于 email 类 型 ， 键 盘 将 是 一 个 为 了 输入 电子 邮件 地 址 进行 了 修改 的 标 
准 QWERTY 键 盘 。 


对 智能 手机 应 用 特别 有 用 的 一 种 输入 类 型 是 语音 输入 类 型 : 将 
itemtype 属 x-webkit-speech/ > 。speech 标 记 将 接收 用 户 所 说 的 话 并 把 它 
翻译 成 文字 。 例 如 ， 我 的 Android 手 机 ， 有 一 个 Google 搜 索 小 工具 ， 可 
以 通过 语音 搜索 。speech 标 记 也 允许 用 户 正 常 地 键入 文本 。 当 用 户 说 
话 时 ，input 将 触发 的 webkitspeechchange 的 事件 ， 它 可 以 用 来 与 用 户 交 
Fo 


警告 : 对 于 非 英 语 母 语 或 者 其 他 非 标准 口音 英语 的 用 户 ， 使 用 这 
个 标记 可 能 会 非常 困难 。 许 多 我 的 以 色 列 和 俄罗斯 的 同事 发 现 ， 这 些 
输入 不 是 非常 有 用 。 它 也 可 能 对 英语 以 外 的 其 他 语言 提供 有 限 的 文 
持 。 因 此 ， 如 果 应 用 的 用 户 讲 波 兰 语 或 希 伯 来 语 ， 标 记 可 能 不 一 定 有 
用 。 


HTML 5 增加 了 请 求 一 个 表单 元 素 的 能 力 。 如 果 required 的 属性 是 
set 并 且 该 元 素 是 空 晶 的， 那么 在 CSS 样 式 中 它 可 能 被 设置 为 :invalid 


selector ° 


要 显示 一 个 滑 块 用 于 让 用 户 从 一 个 值 的 范围 中 进行 选择 ， 可 以 使 
用 range 类 型 。 指 定 其 最 小 值 、 最 大 值 以 及 起 始 值 。 


其 他 输入 类 型 相当 简单 ， 多 数 让 程序 员 指 定 预 期 什么 样 的 数据 ， 
并 且 如 果 一 个 字段 不 正确 则 让 浏览 右 将 其 标记 为 无 效 。 表 10-1 显 示 了 
一 些 可 用 的 选项 。 


表 10-1: 表单 输入 

关 型 H$ 说 明 

email Email 地 址 

date 日 期 min 和 max 可 以 指定 一 个 范围 
time 日 期 时 间 min 和 max 可 以 指定 一 个 范围 
tel 电话 号 码 通过 正则 表达 式 指定 格式 的 模式 
color 颜色 格式 如 #BBBBBB 

number 数字 将 显示 向 上 和 疝 下 箭头 


search 搜索 min 和 max 可 以 指定 一 个 范围 


audio 和 video 


HTML 5 还 通过 < audio > 和 < video > 标记 对 音频 和 视频 提供 了 新 
的 文 持 。 对 于 在 HIML<img > 标记 中 通过 src 属 性 使 用 过 音频 文件 或 
视频 文件 的 人 应 该 对 这 些 标 记 非 常熟 悉 。 它 们 都 可 以 通过 controls 属 性 
进行 设置 以 显示 控制 。 音 频 和 视频 也 可 以 用 JavaScript 进 行 控制 ， 用 
CSS 设 置 样式 。 


对 于 如 何 编写 HTML 5 媒体 脚本 的 完整 描述 超出 了 本 书 的 范围 ， 
不 过 可 以 在 ShellyPowers 的 书 《HTML 5 Media) (HTML 5 媒体 ) 中 找 
到 相关 内 容 。 


Canvas 和 SVG 


除了 提供 声音 和 视频 支持 外 ，HTML 5 还 对 于 在 浏览 器 中 用 Canvas 
和 SVG 构 建 图 像 提 供 了 支持 。 传 统 的 HTML 可 以 显示 图 片 但 是 Canvas 
和 SVG 可 以 做 更 多 的 事情 。 


SVG 是 一 种 可 伸缩 矢量 图 形 的 XML 标准 ， 这 就 是 说 SVG 中 创建 的 
图 像 可 以 缩放 、 旋 转 和 操纵 。 此 外 ， 在 SVG 图 像 中 的 每 个 元 素 都 是 一 
个 DOM 元 素 。 因 此 ， 可 以 说 在 SVG 创建 一 个 附加 标准 JavaScript 事 件 处 
理 程序 的 圆圈 。SVG 中 的 元 素 也 可 以 作为 DOM 的 部 分 进行 操纵 ， 元 素 
可 以 直接 用 DOM 或 jQuery 进行 添加 、 删 除 或 更 改 。SVG 元 素 也 可 以 像 
其 他 任何 HTML 元 素 一 样 用 CSS 设 置 样式 。 有 的 书 深入 探讨 了 SVG， 

如 Kurt Cagle 的 《HTML 5 Graphics with SVG&CSS3) (用 SVG 和 


CSS3 绘 制 HTML 5 图 形 ) 。 


Canvas 由 苹果 公司 最 初创 建 用 于 OS X 中 ， 后 来 引入 到 Safari 中 ， 
已经 从 Safari 引 入 到 大 多 数 其 他 浏览 器 中 。Canvas 提 供 了 一 个 2D 绘 图 
表面 ， 可 以 在 上 面 用 代码 泻 染 图 像 。 在 本 书 第 8 草 的 “Web Worker 雄 形 
示例 ”中 用 它 来 绘制 Mandelbrot 集 ， 其 实 它 的 力量 很 强 。 在 Steve Fulton 


和 Jeff Fulton 有 《HTML 5 Canvas》 中 有 完整 的 介绍 。 


除了 二 维 Canvas 外 ， 基 于 WebGL 的 三 维 Canvas 已 经 开始 在 一 些 浏 
宽 器 中 实现 了 。 相 关 示 例 和 教程 见 HTML 5 Rocks 的 教程 ， 网 址 : 


http://www.HTML 5rocks.com/en/tutorials/three/intro/ ° 


地 理 位 置 


顾名思义 万 维 网 是 履 关 全 世界 的 ， 但 是 它 也 有 很 多 事情 是 本 地 
的 。 如 采 我 正在 寻找 一 个 比 院 饼 店 ， 我 可 能 希望 找 一 个 在 我 所 在 位 置 
附近 的 。 地 理 位 置 让 浏览 郁 通 过 几 种 机 制 确定 用 户 的 位 置 。 如 采 GPS 
可 用 (因为 许多 智能 手机 上 都 有 ) ， 将 使 用 它 获得 可 能 精确 到 几米 的 
位 置 。 如 果 没 有 GPS 的 接 入 ， 那 么 浏览 器 束 可 以 笑 试 使 用 蜂 氏 基站 或 
WiFi 和 集线器 的 信息 ， 这 些 方 法 可 能 不 够 精确 ， 但 往往 也 够 用 。 如 有 果 我 
们 的 目标 是 找到 当地 的 比 防 饼 店 ， 知 道 到 几 个 街区 的 位 置 可 能 束 足 够 
了 。 在 大 多 数 情 况 下 ，Geolocation API 要 求 用 户 批准 该 请 求 。 


要 得 到 用 户 的 位 置 ， 用 两 个 回调 作为 参数 调用 getCurrentPosition() 
方法 ， 一 个 回调 用 于 返回 成 功 的 位 置 ， 为 一 个 用 于 返回 错误 。 在 浏 哆 
右 能 够 找到 用 户 位 置 的 情况 下 ， 将 返回 该 位 置 的 经 度 和 纬度 ， 如 末 能 
弄 清 楚 海 拔高 度 的 话 ， 海 拔高 度 也 是 一 个 精确 的 参数 。 如 有 果 出 现 错 
误 ， 将 调用 相应 的 错误 情况 。 


navigator .geolocation.getCurrentPosition(userLocationCallback, er 
rorCallback); 


#tHICSS 


除了 新 的 JavaScript 接 口 和 新 的 HTML 标 记 外 ，HTML 5 还 增加 了 
一 堆 新 的 CSS 选 择 器 ， 其 中 包括 : nth-child0 和 : first-child， 以 及 CSS 
AAR ISR AF: not()， 其 用 法 如 : not (box) 。 这 些 让 开发 者 能 更 多 
地 控制 应 用 的 界面 。 


除了 新 选择 器 外 ，HTML 5 包含 对 CSS 中 的 Web 字 体 的 支持 。 现 
在 ， 可 以 在 CSS 中 定义 一 种 新 的 字体 并 在 CSS 中 包含 一 个 True Type 字 
体 文件 用 于 产生 特别 的 样式 。 


HTML 5 的 CSS 还 包括 其 他 一 些 非 常 酷 的 功能 ， 可 以 在 文字 的 
Overflow 中 作 更 多 的 设置 ， 通 过 设置 文字 的 Strokes 设 置 一 个 DOM 对 象 
中 透明 度 ， 通 过 HSL 指 定 颜色 以 及 更 多 的 功能 。 当 然 ， 像 HTML 5 中 的 
其 他 所 有 功能 一 样 ， 不 是 所 有 的 浏览 器 中 都 支持 这 些 功能 。 


PRA ”需要 了 解 的 JavaScript 工 具 


在 许多 方面 ，JavaScript 都 是 一 种 年 轻 的 语言 。 昌 然 ， 它 已 经 产生 
大 约 15 年 左右 了 ,但 是 最 近 才 被 用 于 大 型 项 目 。 因 此 一 些 帮助 程序 员 
编写 强大 、 可 调试 的 程序 的 工具 仍 在 开发 中 。 下 面 介绍 儿 个 强烈 推荐 
使 用 的 工具 。 


JSLint 


是 Douglas Crockford 的 JavaScript 语 法 检查 器 。JSLint 可 以 测试 
JavaScript 代 码 所 有 可 能 出 现 的 问题 方式 。 可 以 从 网 站 
(http://jslint.com) 或 本 地 运行 JSLint 。 在 雅虎 的 控件 集中 有 一 个 拖 暇 
控件 ， 可 以 从 命令 行使 用 Rhino 〈 稍 后 讨论 ) 运行 它 。 一 个 简单 的 Bash 
脚本 可 以 使 它 易 于 运行 ( 见 例 A-1) 。 甚 至 可 以 把 JSLint 挂 接 到 你 的 编 
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QR EE FA —“NJavaScript LA, ABMIKeIX— oc ZHEN 
么 ， 参 见 Crockford 的 《JavaScript: ate) (JavaScript: The Good 
Parts,O'Reilly 出 版 ) 。 这 本 书 详细 描述 了 ， 为 什么 要 选择 JSLint。 它 能 
捕获 很 多 非常 常见 的 JavaScript 错 误 ， 并 且 应 该 被 认为 是 每 一 个 
JavaScript 程 序 员 的 工具 链 中 的 一 个 重要 组 成 部 分 。 


要 对 每 个 文件 配置 JSLint， 可 以 在 该 文件 的 顶部 添加 注释 。 这 些 
注释 可 以 在 文件 中 开局 或 关闭 选项 ， 并 告诉 JSLint 在 其 他 地 方 定义 的 
全 局 变量 


例 A-1: JSLint shell wrapper 


#!/bin/bash 
java-jar~/bin/rhino/js.jar~/bin/jslint.js$1 


JSMin 


对 JavaScript 程 序 员 来 说， 事实 征程 序 会 以 源 代码 的 形式 下 载 到 
Web 浏 览 古 。 可 以 通过 缩小 文件 大 小 来 提高 速度 。JSMin 在 文件 上 执行 
一 些 操 作 ， 例 如 删除 注释 和 空 日 。 通 党， 运行 JSMin 后 文件 大 约 是 其 
原始 大 小 的 30%。 这 意味 着 要 传输 到 客户 端 更 少 的 字 市 


警告 : JSMin 是 一 个 单 向 的 过 程 ， 因 此 一 定 要 确保 手头 有 一 份 文 
件 的 副本 。 也 不 应 该 用 于 开发 中 ， 因 为 它 会 使 调试 非常 困难 。 并 且 确 
保 运行 JSLint 之 后 再 运行 JSMin。 


JSBeautifier 


如 果 你 的 JavaScript 代 码 常 党 变 得 混乱 ，JSBeautifier 
(http://jsbeautifier.org) 是 一 个 很 好 的 工具 。 它 会 根据 一 些 基本 的 规则 
重新 格式 化 一 个 JavaScript 文 件 。 可 以 从 网 站 或 从 桌面 命令 行使 用 


Rhino 运 行 它 。 本 书 中 的 所 有 JavaScript 代 码 已 使 用 此 工具 进行 了 格式 
化 。 


JSBeautifier 可 以 采用 一 些 命 令 行 选项 来 指定 缩 进 样式 和 括号 样 
式 。 可 以 通过 制 表 符 或 空格 缩 进 。-i 选 项 控制 缩 进 的 级 别 。 


JSBeautifier 也 可 以 格式 化 JSON 字 符 串 。 因 为 它 是 用 JavaScript 编 写 
的 ， 所 以 可 以 把 它 柑 入 到 其 他 的 JavaScript 程 序 中 。 在 某 些 时 候 ， 如 果 
需要 向 用 户 显示 一 个 JSON 结 构 ， 可 以 使 用 这 个 类 库 漂亮 地 输出 它 〈 见 
例 A-1) 。 


例 A-2: JavaScript Pretty Printer 


#!/bin/bash 

Cp$1$1.bak 

export WORKING_DIR=pwd 

cd~/bin/js-buautify 

java-jar~/bin/rhino/js.jar beautify-cl.js-d~/bin/js-buautify/\ 
-i 1-b-p-n$WORKING_DIR/$1>/tmp/$1 

mv/tmp/$1$WORKING_DIR/$1 


Emacs JS2 模 式 


Emacs JS2 (http://code.google.com/p/js2-mode/) 模式 是 一 个 非常 
好 的 编辑 JavaScript 的 框架 。 对 于 那些 已 经 剖 悉 Emacs 的 人 来 说 ， 这 是 
非常 有 益 的 。 


Aptana 


对 于 那些 希望 在 一 个 完整 的 IDE 中 开发 JavaScript 的 人 ，Aptana 是 
一 个 不 错 的 选择 。Aptana (http://www.aptana.com) 是 一 个 为 JavaScript 


定制 的 Eclipse 版本。 有 很 多 可 以 目 定义 的 选项 。 


警告 ，Aptana 将 重新 格式 化 代码 ， 但 它 有 时 会 以 很 奇怪 的 方式 完 
成 一 一 很 不 错 的 方式 ， 只 是 有 点 不 同 。 


YSlow 


在 一 个 大 型 的 We b 应 用 中 ， 加 载 缓慢 是 不 正常 的 。 如 果 发 生 这 种 
情况 ， 可 以 和 Firebug 一 起 使 用 这 个 工具 ， 找 出 瓶颈 在 哪里 。 该 工具 配 
有 一 本 由 YSlow (http://developer.yahoo.com/yslow/) 创建 者 撰写 的 书 

《高 性 能 网 站 》 (High Performance Web Sites) 。 它 涵盖 了 远 远 比 
JavaScript 更 多 的 内 容 ， 它 会 在 当 每 个 文件 作为 网 页 的 一 部 分 传送 时 了 予 


FireRainbow 


FireRainbow (http://firerainbow.binaryage.com/) 是 一 个 Firebug 插 
件 ， 在 Firebug 脚 本 标记 中 设置 JavaScript 色 彩 。 这 是 一 个 非常 好 的 方 
式 ， 使 调试 右 中 的 代码 更 易于 阅读 。 


Speed Tracer 


= 


Speed Tracer (http://code.google.com/webtoolkit/speedtracer/) 是 
个 GoogleChrome 捅 件 ， 让 你 知道 浏览 器 上 正在 干什么 。 在 花费 好 几 天 
时 间 优 化 JavaScript 之 前 ， 知 道 它 是 否 真 正 有 益 。 如 果 CSS 是 真正 的 瓶 


贷 ， 它 会 告诉 你 ! 


CoffeeScript 


CoffeeScript (http://jashkenas.github.com/coffee.script/) 是 一 种 很 
酷 的 新 语言 ， 它 使 用 JavaScript 作 为 编译 目标 。 如 果 你 喜欢 函数 式 编 
程 ， 应 该 会 对 它 感 兴趣 。 它 已 经 有 一 些 忠实 的 追随 者 。 有 几 本 
CoffeeScript 书 籍 正在 撰写 或 已 经 完成 。CoffeeScript 声 称 其 产生 的 代码 
能 够 通过 JSLint 的 验证 。 


ClojureScript 


如 果 你 喜欢 Lisp， 试 一 下 ClojureScript 
(http://github.com/clojure/clojurescript) ， 它 是 一 种 编译 器 ， 能 将 Lisp 
的 Clojure 直 接 编 译 成 JavaScript。 它 是 由 Clojure 的 创造 者 Rich Hickey 创 
建 的 。 


Rhino 


Rhino (http:/Awww.mozilla.org/rhino/) 是 一 种 基于 Java 的 JavaScript 
实现 。 如 果 你 想 创建 在 JavaScript 中 的 命令 行 上 运行 的 工具 ，Rhino 可 


以 完成 该 任务 。 一 些 JavaScript 程 序 ， 如 JSLint， 在 Rhino 下 运行 的 与 在 
浏览 如 中 一 样 好 。 此 外 ，Rhino 可 以 用 于 在 JavaScript 中 编写 Java 对 和 象 ， 
这 可 能 非常 有 用 。 


Node.js 


Node.js (http://nodejs.org) 是 正在 开发 的 一 个 新 的 服务 器 端 平 
台 。 它 使 用 JavaScript 事 件 循 环 创 建 一 个 非 阻 压 的 服务 器 ， 可 以 很 高 效 
地 处 理 大 量 的 请 求 。 此 项 目 未 来 将 实现 非常 酷 的 功能 。 


